<template>
  <div class="search-result">
    <el-dialog class="warrantyDialog" :visible.sync="warrantyVisible"
               width="80vw" top="0" :before-close="clearWarrantyBarData"
               :title="warrantyBarTitle" center>
      <div class="warrantyEcharts">
        <el-scrollbar style="height: 100%;">
          <div id="warrantyBar" v-loading="warrantyBarLoading"></div>
        </el-scrollbar>
        <!--<div id="warrantyBar" v-loading="warrantyBarLoading"></div>-->
      </div>
      <!--sn详情-->
      <!--<div class="btn-div" style="text-align: right; margin-top: 20px;">-->
      <!--<el-button type="primary" size="mini" @click="toMachineDetail">{{$t('newSearchResult.snDetail')}}</el-button>-->
      <!--</div>-->
    </el-dialog>
    <el-tooltip class="item" effect="dark" :content="$t('newSearchResult.clear')" placement="left">
      <div class="reset" @click="clearAll">
        <i class="iconfont icon-saoba"></i>
      </div>
    </el-tooltip>
    <div class="header-profile">
      <el-row>
        <!--<el-col :span="4">-->
        <!--<div class="cbi-logon">-->
        <!--<img src="../../static/img/mainLogo.png" alt="">-->
        <!--<span>CBI</span>-->
        <!--</div>-->
        <!--</el-col>-->
        <el-col :span="24">
          <div class="company-information">
            <h2 class="company-title">
              <!--<el-button style="width:41px;height:41px;padding:0;position:relative;top:-20px;left:-50px;" @click="toNewPage">new</el-button>-->
              <span><span v-if="searchTag.bpNumber">(ID: {{searchTag.bpNumber}}) </span>{{searchTag.tagTitle}}<a
                :href="searchTag.website" title="点我跳转链接" target="_blank" v-if="searchTag.website">(<span
                class="link">{{searchTag.handleWebsite}}</span>)</a></span>
              <!--<span>{{searchTag.tagTitle}}({{searchTag.website}})</span>-->
              <span class="return" @click="fallBack">
                <i class="icon iconfont icon-houtui"></i>
              </span>
            </h2>
            <tagEdit></tagEdit>
            <div class="company-info" v-if="companyInfo.register_number">
              <el-collapse v-model="activeNames">
                <el-collapse-item name="1">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <div class="p-font">
                        <P>工商注册号：<span>{{companyInfo.register_number}}</span></P>
                        <P>统一信用代码：<span>{{companyInfo.social_credit_code}}</span></P>
                        <P>纳税人识别号：<span>{{companyInfo.corporation_tax}}</span></P>
                        <!--<P>经营范围：ompanyInfo.company_scope</P>-->
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="p-font">
                        <P>组织机构代码：<span>{{companyInfo.organization_code}}</span></P>
                        <P>公司类型：<span>{{companyInfo.company_type}}</span></P>
                        <P>行业：<span>{{companyInfo.industry}}</span></P>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="p-font">
                        <P>登记机关：<span>{{companyInfo.redistration_authority}}</span></P>
                        <P>注册地址：<span>{{companyInfo.redistration_address}}</span></P>
                        <P>营业期限：<span>{{companyInfo.operating_term}}</span></P>
                      </div>
                    </el-col>
                    <el-col :span="24" class="p-font">经营范围：<span>{{companyInfo.company_scope}}</span></el-col>
                    <!--<el-col :span="4" :offset="20" class="p-font">核准日期：{{companyInfo.approval_date}}</el-col>-->
                    <el-col :span="24" class="p-font-little"><span>( {{$t("newSearchResult.tips")}} )</span></el-col>
                  </el-row>
                  <!--<el-row type="flex" class="row-bg" justify="end">-->
                  <!--<el-col :span="5" :offset="19" class="p-font">{{$t("newSearchResult.tips")}}</el-col>-->
                  <!--</el-row>-->
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="select-dimension">
      <!--<el-button type="danger" @click="clearAll" size="small" class="btn-clear">-->
      <!--<i class="icon iconfont icon-11zhongzhi" style="position: relative; top: 2px;"></i> {{$t('newSearchResult.clear')}}-->
      <!--</el-button>-->
      <!--<span class="clearSelect" @click="clearLodaAccount">Clear</span>-->
      <el-card>
        <div class="select-item">
          <div style="display: flex">
            <div style="flex: 1;">
              <span class="title-tag">Geo</span>
              <el-select :disabled="Ban" v-model="geoValue" multiple collapse-tags style="margin-left: 5px;"
                         @change="changeAccountGeo(geoValue)">
                <el-option
                  v-for="item in geoData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            </div>
            <div style="flex: 1; margin-left:-35px;">
              <span class="title-tag">Region</span>
              <el-select :disabled="Ban" v-model="regionValue" multiple collapse-tags style="margin-left: 5px;"
                         @change="changeAccountRegion(regionValue)" popper-class="font12px">
                <el-option
                  v-for="item in regionData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            </div>
            <div style="flex: 1;">
              <span class="title-tag">{{$t('newSearchResult.country')}}</span>
              <el-select :disabled="Ban" v-model="countryValue" multiple collapse-tags style="margin-left: 5px;"
                         @change="changeAccountCountry(countryValue)">
                <el-option
                  v-for="item in countryData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            </div>
            <div style="flex: 1;">
              <span class="title-tag">{{$t('newSearchResult.year')}}</span>
              <el-select
                v-model="accountYearValue"
                multiple
                collapse-tags
                style="margin-left: 5px;"
                @change="changeAccountYear(accountYearValue)">
                <el-option
                  v-for="item in accountYearData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div style="flex: 1;">
              <span class="title-tag">BU</span>
              <el-select v-model="finalBuValue" multiple collapse-tags style="margin-left: 5px;"
                         @change="changeFinalBu(finalBuValue)" popper-class="font12px">
                <el-option
                  v-for="item in finalBuData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            </div>
          </div>
          <!--<el-row type="flex" justify="space-between" style="height: 42px;">-->
          <!--<el-col :span="4">-->
          <!--<span class="title-tag">Geo</span>-->
          <!--<el-select :disabled="Ban" v-model="geoValue" multiple collapse-tags style="margin-left: 5px;" @change="changeAccountGeo(geoValue)">-->
          <!--<el-option-->
          <!--v-for="item in geoData"-->
          <!--:key="item.value"-->
          <!--:label="item.label"-->
          <!--:value="item.value"-->
          <!--:disabled="item.disabled">-->
          <!--</el-option>-->
          <!--</el-select>-->
          <!--&lt;!&ndash;<el-select :disabled="Ban" v-model="geoValue" :placeholder="$t('newSearchResult.selectPlace')" multiple collapse-tags style="margin-left: 5px;" @change="changeAccountGeo(geoValue)">&ndash;&gt;-->
          <!--&lt;!&ndash;<el-option&ndash;&gt;-->
          <!--&lt;!&ndash;v-for="item in geoData"&ndash;&gt;-->
          <!--&lt;!&ndash;:key="item.value"&ndash;&gt;-->
          <!--&lt;!&ndash;:label="item.label"&ndash;&gt;-->
          <!--&lt;!&ndash;:value="item.value"&ndash;&gt;-->
          <!--&lt;!&ndash;:disabled="item.disabled">&ndash;&gt;-->
          <!--&lt;!&ndash;</el-option>&ndash;&gt;-->
          <!--&lt;!&ndash;</el-select>&ndash;&gt;-->
          <!--</el-col>-->
          <!--<el-col :span="4" :offset="1">-->
          <!--<span class="title-tag">Region</span>-->
          <!--<el-select :disabled="Ban" v-model="regionValue" multiple collapse-tags style="margin-left: 5px;" @change="changeAccountRegion(regionValue)">-->
          <!--<el-option-->
          <!--v-for="item in regionData"-->
          <!--:key="item.value"-->
          <!--:label="item.label"-->
          <!--:value="item.value"-->
          <!--:disabled="item.disabled">-->
          <!--</el-option>-->
          <!--</el-select>-->
          <!--</el-col>-->
          <!--<el-col  :span="4" :offset="1">-->
          <!--<span class="title-tag">{{$t('newSearchResult.country')}}</span>-->
          <!--<el-select :disabled="Ban" v-model="countryValue" multiple collapse-tags style="margin-left: 5px;" @change="changeAccountCountry(countryValue)">-->
          <!--<el-option-->
          <!--v-for="item in countryData"-->
          <!--:key="item.value"-->
          <!--:label="item.label"-->
          <!--:value="item.value"-->
          <!--:disabled="item.disabled">-->
          <!--</el-option>-->
          <!--</el-select>-->
          <!--</el-col>-->
          <!--<el-col  :span="4" :offset="1">-->
          <!--<span class="title-tag">{{$t('newSearchResult.year')}}</span>-->
          <!--<el-select-->
          <!--v-model="accountYearValue"-->
          <!--multiple-->
          <!--collapse-tags-->
          <!--style="margin-left: 5px;"-->
          <!--@change="changeAccountYear(accountYearValue)">-->
          <!--<el-option-->
          <!--v-for="item in accountYearData"-->
          <!--:key="item.value"-->
          <!--:label="item.label"-->
          <!--:value="item.value">-->
          <!--</el-option>-->
          <!--</el-select>-->
          <!--</el-col>-->
          <!--<el-col  :span="4" :offset="1">-->
          <!--<span class="title-tag">Final BU</span>-->
          <!--<el-select v-model="finalBuValue" multiple collapse-tags style="margin-left: 5px;" @change="changeFinalBu(finalBuValue)">-->
          <!--<el-option-->
          <!--v-for="item in finalBuData"-->
          <!--:key="item.value"-->
          <!--:label="item.label"-->
          <!--:value="item.value"-->
          <!--:disabled="item.disabled">-->
          <!--</el-option>-->
          <!--</el-select>-->
          <!--</el-col>-->
          <!--</el-row>-->
        </div>
      </el-card>
    </div>
    <div class="search-tab">
      <el-tabs v-model="show" type="card" @tab-click="change"
               @click.native="TaBaction(`${searchItem},tabTitle:${show}`)">
        <el-tab-pane :label="$t('newSearchResult.AccountProfile')" name="1" id="one">
          <div class="select-item2">
            <el-row style="text-align: center;">
              <el-col :span="12" :offset="6">
                <el-radio-group v-model="radio1" class="but-tab" size="mini" @change="changeRadio1(radio1)">
                  <el-radio-button label="1">{{$t('newSearchResult.REV')}}</el-radio-button>
                  <el-radio-button label="2">{{$t('newSearchResult.GP')}}</el-radio-button>
                  <el-radio-button label="3">{{$t('newSearchResult.SellIn')}}</el-radio-button>
                  <!-- <i class="iconfont icon-information" style="color: #409eff;vertical-align: middle;cursor: pointer" @click="title=!title"></i> -->
                </el-radio-group>
              </el-col>
            </el-row>
          </div>
          <el-row class="select-echarts" v-if="result_flag === 'account'">
            <el-col :span="6">
              <el-card style="margin-right: 30px;">
                <!--<div style="margin-right: 30px; background-color: #fff; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); border: 1px solid #e6ebf5; padding: 20px;">-->
                <h3 class="h3-pama0">{{$t('newSearchResult.accountPieTitle')}}</h3>
                <div id="pieEcharts" style="width: 100%; height: 30vh;" v-loading="accountPieLoading"></div>
                <!--</div>-->
              </el-card>
            </el-col>
            <el-col :span="18">
              <el-card>
                <h3 class="h3-pama0">{{$t('newSearchResult.accountBarTitle')}}</h3>
                <div class="barEcharts" style="width: 100%; height: 30vh; overflow-y: auto; overflow-x: hidden"
                     v-loading="accountBarLoading">
                  <div id="barEcharts" style="width: 100%; height: 30vh; overflow-y: auto; overflow-x: hidden"
                       v-loading="accountBarLoading"></div>
                </div>
              </el-card>
            </el-col>
            <!--<el-col :span="9">-->
            <!--<h3 style="text-align: center;">{{$t('newSearchResult.accountLineTitle')}}</h3>-->
            <!--<div id="lineEcharts" style="width: 30vw; height: 40vh;"></div>-->
            <!--</el-col>-->
          </el-row>
          <div class="profile">
            <div class="echart">
              <el-row>
                <el-col :span="24">
                  <el-card>
                    <h3 class="h3-pama0">{{$t('newSearchResult.accountLineTitle')}}</h3>
                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                    <div id="echart" style="width: 100%; height:30vh;" v-loading="accountLineLoading"></div>
                    <!--以上是日提示框内容-->
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="account" v-show="show === '1'" v-if="result_flag === 'account'">
            <el-card>
              <div style="width: 100%;overflow: hidden">
                <el-dialog
                  :title="$t('newSearchResult.personList')"
                  :visible.sync="AccountList.dialogVisible"
                  width="60%">
                  <div style="width: 100%;overflow: hidden">
                    <el-input v-model="personListTab.search" size="mini" placeholder="Global filter
"></el-input>
                    <!--<div class="">{{$t('newSearchResult.total')}}：{{AccountList.total}}</div>-->
                    <ag-grid-vue style="width: 100%; height: 350px;" class="ag-theme-balham"
                                 :gridOptions="gridOptionsTouchablePersonList"
                                 :enableColResize="true"
                                 :enableSorting="true"
                                 :enableFilter="true"
                                 :groupHeaders="false"
                                 :suppressRowClickSelection="true"
                                 :toolPanelSuppressGroups="false"
                                 :toolPanelSuppressValues="true">
                    </ag-grid-vue>
                    <div class="block f-r">
                      <el-pagination
                        @size-change="prestoPersonListPageSizeChange"
                        @current-change="prestoPersonListCurrentChange"
                        :current-page="personListTab.currentPageNew"
                        :page-sizes="[50, 100, 200, 500, 1000]"
                        :page-size="personListTab.pageSizeNew"
                        layout="sizes, prev, pager, next"
                        :total="personListTab.totalNew">
                      </el-pagination>
                    </div>
                  </div>
                  <span slot="footer" class="dialog-footer">
                <!--<el-button @click="AccountList.dialogVisible = false">取 消</el-button>-->
                <el-button type="primary" size="mini" @click="AccountList.dialogVisible = false">O K</el-button>
              </span>
                </el-dialog>
                <h2 style="margin-top: 0px;">{{$t('newSearchResult.detail.account')}}</h2>
                <el-input v-model="AccountList.search" size="mini"
                          @input="globalSearch('gridOptions', 'AccountList.search')" placeholder="Global filter
"></el-input>
                <!--<div class="">{{$t('newSearchResult.total')}}：{{AccountList.total}}</div>-->
                <ag-grid-vue style="width: 100%; height: 400px;margin-top: 5px"
                             v-loading="accountLoading"
                             class="ag-theme-balham"
                             :gridOptions="gridOptions"
                             :enableColResize="true"
                             :enableFilter="true"
                             :groupHeaders="false"
                             :suppressRowClickSelection="true"
                             :toolPanelSuppressGroups="false"
                             :toolPanelSuppressValues="true">
                </ag-grid-vue>
                <div class="block f-r testPage">
                  <el-pagination
                    @size-change="prestoAccountProfilePageSizeChange"
                    @current-change="prestoAccountProfileCurrentChange"
                    :current-page="AccountList.currentPage2"
                    :page-sizes="[50, 100, 200, 500, 1000]"
                    :page-size="AccountList.pageSize2"
                    layout="sizes, prev, pager, next"
                    :total="AccountList.total">
                  </el-pagination>
                </div>
              </div>
              <!--<div class="tag">-->
              <!--条件筛选：-->
              <!--<el-checkbox v-model="AccountList.checkbox.checked1" @change="showID(AccountList.checkbox.checked1)">ID</el-checkbox>-->
              <!--<el-checkbox v-model="AccountList.checkbox.checked2" @change="showName(AccountList.checkbox.checked2)">Name</el-checkbox>-->
              <!--<el-checkbox v-model="AccountList.checkbox.checked3" @change="showGeo(AccountList.checkbox.checked3)">Geo</el-checkbox>-->
              <!--</div>-->
              <!--详情奇-->
              <div style="width: 100%;overflow: hidden">
                <el-dialog
                  title="Data Detail"
                  :visible.sync="dialogDetailVisible"
                  width="98%">
                  <div style="width: 100%;overflow: hidden">
                    <ag-grid-vue style="width: 100%; height: 350px;" class="ag-theme-balham"
                                 v-loading="detailLoading"
                                 :gridOptions="gridOptionsDetailData"
                                 :enableColResize="true"
                                 :enableSorting="true"
                                 :enableFilter="true"
                                 :groupHeaders="false"
                                 :suppressRowClickSelection="true"
                                 :toolPanelSuppressGroups="false"
                                 :toolPanelSuppressValues="true">
                    </ag-grid-vue>
                    <div class="block f-r">
                      <el-pagination
                        @size-change="prestoDetailTablePageSizeChange"
                        @current-change="prestoDetailTableCurrentChange"
                        :current-page="detailTablePage"
                        :page-sizes="[50, 100, 200, 500, 1000]"
                        :page-size="perDetailTableData"
                        layout="sizes, prev, pager, next"
                        :total="totalDetailTableTotal">
                      </el-pagination>
                    </div>
                  </div>
                  <span slot="footer" class="dialog-footer">
                <!--<el-button @click="AccountList.dialogVisible = false">取 消</el-button>-->
                <el-button type="primary" size="mini" @click="dialogDetailVisible = false">O K</el-button>
              </span>
                </el-dialog>
              </div>
            </el-card>
          </div>
          <!--个人信息表-->
          <div class="person-list" v-show="personListTab.total">
            <el-card>
              <!--<div class="person-list">-->
              <h2>{{$t('newSearchResult.personList')}}</h2>
              <div style="width: 100%;overflow: hidden">
                <el-input v-model="personListTab.search" size="mini"
                          @input="globalSearch('touchablePersonList', 'personListTab.search')"
                          placeholder="Global filter
"></el-input>
                <!--<div class="">{{$t('newSearchResult.total')}}：{{AccountList.total}}</div>-->
                <ag-grid-vue style="width: 100%; height: 400px;" class="ag-theme-balham"
                             :gridOptions="touchablePersonList"
                             :enableColResize="true"
                             :enableSorting="true"
                             :enableFilter="true"
                             :groupHeaders="false"
                             :suppressRowClickSelection="true"
                             :toolPanelSuppressGroups="false"
                             :toolPanelSuppressValues="true">
                </ag-grid-vue>
              </div>
              <div class="block f-r">
                <el-pagination
                  @size-change="personListPageSizeChange"
                  @current-change="personListCurrentChange"
                  :current-page="personListTab.currentPage1"
                  :page-sizes="[50, 100, 200, 500, 1000]"
                  :page-size="personListTab.pageSize1"
                  layout="sizes, prev, pager, next"
                  :total="personListTab.total">
                </el-pagination>
              </div>
            </el-card>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('newSearchResult.Machine')" name="2" id="two">
          <div class="select-item2">
            <el-row style="text-align: center;">
              <el-col :span="12" :offset="6">
                <el-radio-group v-model="radio2" class="but-tab" size="mini" @change="changeRadio2(radio2)">
                  <el-radio-button label="1">{{$t('newSearchResult.REV')}}</el-radio-button>
                  <el-radio-button label="2">{{$t('newSearchResult.GP')}}</el-radio-button>
                  <el-radio-button label="3">{{$t('newSearchResult.SellIn')}}</el-radio-button>
                  <!-- <i class="iconfont icon-information" style="color: #409eff;vertical-align: middle;cursor: pointer" @click="title=!title"></i> -->
                </el-radio-group>
              </el-col>
            </el-row>
          </div>
          <el-row class="select-echarts">
            <!--<el-col :span="9" :offset="1" style="position: relative;">-->
            <!--<h3 class="h3-pama0">{{$t('newSearchResult.transactionBarTitle')}}</h3>-->
            <!--<span style="position: absolute; right: -50px; top: 10px;" @click="loadMachineBarEcharts"-->
            <!--v-if="returnIcon"><i class="icon iconfont icon-fanhui"></i></span>-->
            <!--<div id="barTransaction" style="width: 30vw; height: 48vh;"></div>-->
            <!--</el-col>-->
            <el-col :span="24" style="position: relative;">
              <el-card>
                <h3 class="h3-pama0">{{$t('newSearchResult.transactionBarTitle')}}</h3>
                <span style="position: absolute; right: 50px; top: 10px;" @click="returnBefore"
                      v-if="returnIcon"><i class="icon iconfont icon-fanhui"></i></span>
                <div class="barTransaction" style="width: 100%; height: 35vh;overflow: auto;"
                     v-loading="machineBarLoading">
                  <div id="barTransaction" style="width: 100%; height: 35vh;overflow: auto;"></div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <!--新增过保-->
          <div class="warranty-card">
            <el-row class="warranty-content">
              <el-col :span="24">
                <el-card>
                  <h3 class="h3-title">{{$t('newSearchResult.warranty')}}</h3>
                  <div class="flex-father">
                    <!--<div class="flex-son"  @click="showWarranty(busValue,productsValue,'expired_90',negColor.startColor,negColor.endColor,warrantyData.neg3)">-->
                    <div class="flex-son"
                         @click="showWarranty(busValue,productsValue,'expired_90',warrantyBarColor.expired_90,warrantyData.neg3)">
                      <span class="round-icon color1 expired_90"></span>
                      <!--<span class="round-icon color1 expired-color"></span>-->
                      <!--<span class="title">Expired in last <span class="title-bold">90</span> days</span>-->
                      <span class="title" v-html="$t('newSearchResult.expired1')"></span>
                      <div class="flex-son-div">
                        <div class="top-color color1 expired_90"></div>
                        <h3 class="son-h3">{{warrantyData.neg3}}</h3>
                        <span class="mb-30">{{$t('newSearchResult.machines')}}</span>
                      </div>
                    </div>
                    <div class="flex-son"
                         @click="showWarranty(busValue,productsValue,'expired_60',warrantyBarColor.expired_60,warrantyData.neg2)">
                      <span class="round-icon color2 expired_60"></span>
                      <!--<span class="round-icon color2 expired-color"></span>-->
                      <span class="title" v-html="$t('newSearchResult.expired2')"></span>
                      <div class="flex-son-div">
                        <div class="top-color color2 expired_60"></div>
                        <h3 class="son-h3">{{warrantyData.neg2}}</h3>
                        <span class="mb-30">{{$t('newSearchResult.machines')}}</span>
                      </div>
                    </div>
                    <div class="flex-son"
                         @click="showWarranty(busValue,productsValue,'expired_30',warrantyBarColor.expired_30,warrantyData.neg1)">
                      <span class="round-icon color3 expired_30"></span>
                      <!--<span class="round-icon color3 expired-color"></span>-->
                      <span class="title" v-html="$t('newSearchResult.expired3')"></span>
                      <div class="flex-son-div">
                        <div class="top-color color3 expired_30"></div>
                        <h3 class="son-h3">{{warrantyData.neg1}}</h3>
                        <span class="mb-30">{{$t('newSearchResult.machines')}}</span>
                      </div>
                    </div>
                    <div class="flex-line"></div>
                    <div class="flex-son"
                         @click="showWarranty(busValue,productsValue,'expire_in_30',warrantyBarColor.expire_in_30,warrantyData.pos1)">
                      <span class="round-icon color4 expire_in_30"></span>
                      <!--<span class="round-icon color4 expire-color"></span>-->
                      <span class="title" v-html="$t('newSearchResult.expire1')"></span>
                      <div class="flex-son-div">
                        <div class="top-color color4 expire_in_30"></div>
                        <h3 class="son-h3">{{warrantyData.pos1}}</h3>
                        <span class="mb-30">{{$t('newSearchResult.machines')}}</span>
                      </div>
                    </div>
                    <div class="flex-son"
                         @click="showWarranty(busValue,productsValue,'expire_in_60',warrantyBarColor.expire_in_60,warrantyData.pos2)">
                      <span class="round-icon color5 expire_in_60"></span>
                      <!--<span class="round-icon color5 expire-color"></span>-->
                      <span class="title" v-html="$t('newSearchResult.expire2')"></span>
                      <div class="flex-son-div">
                        <div class="top-color color5 expire_in_60"></div>
                        <h3 class="son-h3">{{warrantyData.pos2}}</h3>
                        <span class="mb-30">{{$t('newSearchResult.machines')}}</span>
                      </div>
                    </div>
                    <div class="flex-son"
                         @click="showWarranty(busValue,productsValue,'expire_in_90',warrantyBarColor.expire_in_90,warrantyData.pos3)">
                      <span class="round-icon color6 expire_in_90"></span>
                      <!--<span class="round-icon color6 expire-color"></span>-->
                      <span class="title" v-html="$t('newSearchResult.expire3')"></span>
                      <div class="flex-son-div">
                        <div class="top-color color6 expire_in_90"></div>
                        <h3 class="son-h3">{{warrantyData.pos3}}</h3>
                        <span class="mb-30">{{$t('newSearchResult.machines')}}</span>
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <div style="width: 100%;overflow: hidden">
            <el-dialog
              title="Data Detail"
              :visible.sync="dialogDetailVisibleMachine"
              width="98%">
              <div style="width: 100%;overflow: hidden">
                <ag-grid-vue style="width: 100%; height: 350px;"
                             v-loading="detailMachineLoading"
                             class="ag-theme-balham"
                             :gridOptions="gridOptionsDetailDataMachine"
                             :enableColResize="true"
                             :enableSorting="true"
                             :enableFilter="true"
                             :groupHeaders="false"
                             :suppressRowClickSelection="true"
                             :toolPanelSuppressGroups="false"
                             :toolPanelSuppressValues="true">
                </ag-grid-vue>
                <div class="block f-r">
                  <el-pagination
                    @size-change="detailTablePageSizeChangeMachine"
                    @current-change="detailTableCurrentChangeMachine"
                    :current-page="detailTablePageMachine"
                    :page-sizes="[500, 1000, 1500, 2000]"
                    :page-size="perDetailTableDataMachine"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalDetailTableDataMachine">
                  </el-pagination>
                </div>
              </div>
              <span slot="footer" class="dialog-footer">
                <!--<el-button @click="AccountList.dialogVisible = false">取 消</el-button>-->
                <el-button type="primary" size="mini" @click="dialogDetailVisibleMachine = false">O K</el-button>
              </span>
            </el-dialog>
          </div>
          <!--汉化表头的-->
          <div class="transaction" v-show="show === '2'">
            <!--<div class="total-fr">{{$t('newSearchResult.total')}}：{{TransactionDocument.total}}</div>-->
            <el-table
              v-if="false"
              v-loading="tabLoading"
              element-loading-text="loading"
              :data="TransactionDocument.transactionTableData"
              style="width: 100%"
              :height="tabHeight"
              border
              highlight-current-row
              :default-sort="{prop: 'date', order: 'descending'}"
            >
              <el-table-column
                type="index"
                min-width="30">
              </el-table-column>
              <el-table-column
                v-if="result_flag === 'account'"
                class-name="elHeight"
                show-overflow-tooltip
                prop="bp_number"
                :label="$t('newSearchResult.machineTHeader.THead1')"
                sortable
                min-width="100">
              </el-table-column>
              <el-table-column
                v-if="result_flag === 'account'"
                show-overflow-tooltip
                prop="bp_name"
                :label="$t('newSearchResult.machineTHeader.THead2')"
                sortable
                min-width="120">
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="contract"
                :label="$t('newSearchResult.machineTHeader.THead3')"
                sortable
                min-width="100">
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="country"
                :label="$t('newSearchResult.machineTHeader.THead4')"
                sortable
                min-width="100">
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="product"
                :label="$t('newSearchResult.machineTHeader.THead5')"
                sortable
                min-width="100">
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="material"
                :label="$t('newSearchResult.machineTHeader.THead6')"
                sortable
                min-width="100">
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="material_description"
                :label="$t('newSearchResult.machineTHeader.THead7')"
                sortable
                min-width="170">
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="sales_order"
                :label="$t('newSearchResult.machineTHeader.THead8')"
                sortable
                min-width="120">
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="delivery_notes"
                :label="$t('newSearchResult.machineTHeader.THead9')"
                sortable
                min-width="130">
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="billings"
                :label="$t('newSearchResult.machineTHeader.THead10')"
                sortable
                min-width="100">
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="billing_date"
                :label="$t('newSearchResult.machineTHeader.THead11')"
                sortable
                min-width="120">
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="ca"
                :label="$t('newSearchResult.machineTHeader.THead12')"
                sortable
                :formatter="formatters"
                min-width="90">
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="revenue"
                :label="$t('newSearchResult.machineTHeader.THead13')"
                sortable
                :formatter="formatters"
                min-width="110">
              </el-table-column>
            </el-table>
            <el-card>
              <div style="width: 100%;overflow: hidden">
                <h2 style="margin-top: 0px;">{{$t('newSearchResult.detail.machine')}}</h2>
                <el-input v-model="TransactionDocument.search" size="mini"
                          @input="globalSearch('machineOptions', 'TransactionDocument.search')"
                          placeholder="Global filter
"></el-input>
                <!--<div class="">{{$t('newSearchResult.total')}}：{{AccountList.total}}</div>-->
                <ag-grid-vue style="width: 100%; height: 400px;" class="ag-theme-balham"
                             v-loading="transactionLoading"
                             :gridOptions="machineOptions"
                             :enableColResize="true"
                             :enableSorting="true"
                             :enableFilter="true"
                             :groupHeaders="false"
                             :suppressRowClickSelection="true"
                             :toolPanelSuppressGroups="false"
                             :toolPanelSuppressValues="true">
                </ag-grid-vue>
              </div>
              <div class="block f-r">
                <el-pagination
                  @size-change="prestoMachinePageSizeChange"
                  @current-change="prestoMachineCurrentChange"
                  :current-page="TransactionDocument.currentPage3"
                  :page-sizes="[50, 100, 200, 500, 1000]"
                  :page-size="TransactionDocument.pageSize3"
                  layout="sizes, prev, pager, next"
                  :total="TransactionDocument.total">
                </el-pagination>
              </div>
            </el-card>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('newSearchResult.Claim')" name="3" id="three">
          <el-row class="select-echarts">
            <el-col :span="6">
              <el-card style="margin-right: 30px;">
                <h3 class="h3-pama0">{{$t('newSearchResult.accountPieTitle')}}</h3>
                <div id="ClaimPie" style="width: 100%; height: 30vh;" v-loading="claimPieLoading"></div>
              </el-card>
            </el-col>
            <el-col :span="18">
              <el-card>
                <h3 class="h3-pama0">{{$t('newSearchResult.accountBarTitle')}}</h3>
                <div class="ClaimBar" style="width: 100%; height: 30vh;overflow-y: auto; overflow-x: hidden"
                     v-loading="claimBarLoading">
                  <div id="ClaimBar"></div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row class="select-echarts">
            <el-col :span="24" style="margin-top: 20px; padding-bottom: 10px;">
              <el-card>
                <h3 class="h3-pama0">{{$t('newSearchResult.accountLineTitle')}}</h3>
                <div id="ClaimLine" style="width: 100%; height: 35vh;" v-loading="claimLineLoading"></div>
              </el-card>
            </el-col>
            <el-col :span="24" style="position: relative; margin-top: 20px;">
              <el-card>
                <h3 class="h3-pama0">{{$t('newSearchResult.transactionBarTitle')}}</h3>
                <span style="position: absolute; right: 50px; top: 10px;" @click="loadCliamBar2Echarts"
                      v-if="claimReturnIcon"><i class="icon iconfont icon-fanhui"></i></span>
                <!--<div id="ClaimBar2" style="width: 100%; height: 35vh;" v-loading="claimBar2Loading"></div>-->
                <div class="ClaimBar" style="width: 100%; height: 35vh;overflow-y: auto; overflow-x: hidden"
                     v-loading="claimBar2Loading">
                  <div class="nodata" v-if="showNoData.ClaimBar2">No Data</div>
                  <div id="ClaimBar2"></div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <div class="service" v-show="show === '3'">
            <!--<div class="total-fr">{{$t('newSearchResult.total')}}：{{Service.total}}</div>-->
            <!--<div class="total-fr">{{$t('newSearchResult.total')}}：{{Service.bpClaim}}</div>-->
            <el-card>
              <div style="width: 100%;overflow: hidden">
                <h2 style="margin-top: 0px;">{{$t('newSearchResult.detail.claim')}}</h2>
                <el-input v-model="Service.search" size="mini" @input="globalSearch('claimOptions', 'Service.search')"
                          placeholder="Global filter
"></el-input>
                <!--<div class="">{{$t('newSearchResult.total')}}：{{AccountList.total}}</div>-->
                <ag-grid-vue style="width: 100%; height: 400px;" class="ag-theme-balham"
                             v-loading="serviceLoading"
                             :gridOptions="claimOptions"
                             :enableColResize="true"
                             :enableSorting="true"
                             :enableFilter="true"
                             :groupHeaders="false"
                             :suppressRowClickSelection="true"
                             :toolPanelSuppressGroups="false"
                             :toolPanelSuppressValues="true">
                </ag-grid-vue>
              </div>
              <div class="block f-r">
                <el-pagination
                  @size-change="prestoClaimPageSizeChange"
                  @current-change="prestoClaimCurrentChange"
                  :current-page="Service.currentPage5"
                  :page-sizes="[50, 100, 200, 500, 1000]"
                  :page-size="Service.pageSize5"
                  layout="sizes, prev, pager, next"
                  :total="Service.total">
                </el-pagination>
              </div>
            </el-card>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="checkPermission_BG(['DCG'])" :label="$t('newSearchResult.IS_OS')" name="4" id="fore">
          <div class="select-item2 isos">
            <el-row style="text-align: center;">
              <el-col :span="12" :offset="6">
                <el-radio-group v-model="radio3" class="but-tab" size="mini" @change="changeRadio3(radio3)">
                  <el-radio-button label="1">{{$t('newSearchResult.isos.inSale')}}</el-radio-button>
                  <el-radio-button label="2">{{$t('newSearchResult.isos.outSale')}}</el-radio-button>
                  <!-- <i class="iconfont icon-information" style="color: #409eff;vertical-align: middle;cursor: pointer" @click="title=!title"></i> -->
                </el-radio-group>
              </el-col>
            </el-row>
          </div>
          <div class="is-div" v-show="radio3 == 1">
            <el-card>
              <h2 style="margin: 0; padding: 0;">{{$t('newSearchResult.isos.customerV')}}</h2>
              <el-row>
                <el-col :span="24">
                  <div class="isEchart" id="isEchart" style="width: 100%; height: 400px;"></div>
                </el-col>
              </el-row>
            </el-card>
            <el-card style="margin-top: 10px; margin-bottom: 10px;">
              <el-row>
                <el-col :span="24">
                  <div>
                    <h2 style="margin-top: 0px;">{{$t('newSearchResult.detail.isos')}}</h2>
                    <el-input v-model="Service.search" size="mini"
                              @input="globalSearch('isTableColsOptions', 'Service.search')"
                              placeholder="Global filter
"></el-input>
                    <ag-grid-vue style="width: 100%; height: 500px;"
                                 class="ag-theme-balham"
                                 :gridOptions="isTableColsOptions"
                                 :enableColResize="true"
                                 :enableSorting="true"
                                 :enableFilter="true"
                    >
                    </ag-grid-vue>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </div>
          <div class="os-div" v-show="radio3 == 2">
            <el-card>
              <h2 style="margin: 0; padding: 0;">{{$t('newSearchResult.isos.customerV')}}</h2>
              <el-row>
                <el-col :span="24">
                  <div class="osEchart" id="osEchart" style="width: 100%; height: 400px;"></div>
                </el-col>
              </el-row>
            </el-card>
            <el-card style="margin-top: 10px; margin-bottom: 10px;">
              <el-row style="margin-top: 20px; margin-bottom: 20px;">
                <el-col :span="24">
                  <div>
                    <h2 style="margin-top: 0;">{{$t('newSearchResult.detail.isos')}}</h2>
                    <el-input v-model="Service.search" size="mini"
                              @input="globalSearch('osTableColsOptions', 'Service.search')"
                              placeholder="Global filter
"></el-input>
                    <ag-grid-vue style="width: 100%; height: 500px;"
                                 class="ag-theme-balham"
                                 :gridOptions="osTableColsOptions"
                                 :enableColResize="true"
                                 :enableSorting="true"
                                 :enableFilter="true">
                    </ag-grid-vue>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="checkPermission_BG(['DCG'])" :label="$t('newSearchResult.Survey1')" name="5" id="five">
          <Survey ref="Survey" :geos="geoValue" :regions="regionValue" :countrys="countryValue"
                  :fisyears="accountYearValue" :bus="finalBuValue" :show="show"></Survey>
        </el-tab-pane>
        <el-tab-pane v-if="checkPermission_BG(['DCG'])" :label="$t('newSearchResult.ProductPreference1')" name="6"
                     id="six">
          <ProductPreference ref="ProductPreference" :geos="geoValue" :regions="regionValue" :countrys="countryValue"
                             :fisyears="accountYearValue" :bus="finalBuValue" :show="show"></ProductPreference>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import tagEdit from '../CustomerProfile/components/tagEdit'
  import Survey from '../CustomerProfile/components/Survey'
  import ProductPreference from '../CustomerProfile/components/ProductPreference'
  import {getUsername, getPageId, getPageName, getUrl, getsearchItem, sortObj} from '../../../utils/auth'
  import {mapGetters} from 'vuex'
  import checkPermission_BG from './../../../utils/permission_BG'
  import {AgGridVue} from "ag-grid-vue";

  let TouchablePersonIcon = Vue.extend({
    template: '<div style="text-align: center"><i v-if="show" class="icon iconfont icon-renyuanguanli person-icon" @click="toParents" style="cursor: pointer;"></i></div>',
    data() {
      return {
        show: '',
      }
    },
    methods: {
      toParents() {
        // console.log('获得合法看到好看')
        // console.log(this.params)
        this.params.context.componentParent.methodFromParent(this.params)
      }
    },
    mounted() {
      this.params.value === '1' ? this.show = true : this.show = false
    }
  })
  let SearchDetailIcon = Vue.extend({
    template: '<div style="text-align: center"><i class="el-icon-search" @click="toDetail" style="cursor: pointer;"></i></div>',
    data() {
      return {
        show: ''
      }
    },
    methods: {
      toDetail() {
        this.params.context.componentParent.methodToDetail(this.params)
      }
    },
    mounted() {
      this.params.value === '1' ? this.show = true : this.show = false
    }
  })

  export default {
    name: 'newSearchResult',
    components: {
      tagEdit: tagEdit,
      ProductPreference,
      Survey,
      'ag-grid-vue': AgGridVue,
    },
    data() {
      return {
        showNoData: {
          ClaimBar2: false
        },
        prodFamily: '',
        snDetailBuValue: [],
        snDetailProValue: [],
        // 表格详情
        snBpNums: '',
        dialogDetailVisible: false,
        detailTablePage: 1,
        perDetailTableData: 500,
        totalDetailTableTotal:null,
        totalDetailTableData: null,
        gridOptionsDetailData: {
          columnDefs: [
            // // {headerName: '#', field: "customname", width: 100, enableSorting: false, cellRenderer: index},
            // {headerName: "Customname", field: "customname", tooltipField: "customname"},
            // {headerName: "Contactphone Sc", field: "contactphone_sc"},
            // {headerName: "Email", field: "email"},
            // {headerName: "Street", field: "street"},
            // {headerName: "From", field: "from"}
            // {headerName: "Touchable Person", field: "total"},
            {headerName: "Authority Geo", field: "authority_geo"},
            {headerName: "Billing Date", field: "billing_date"},
            {headerName: "Billing Item", field: "billing_item"},
            {headerName: "Billing Month Fis", field: "billing_month_fis"},
            {headerName: "Billing Num", field: "billing_num"},
            {headerName: "Billing Quarter Fis", field: "billing_quarter_fis"},
            {headerName: "Bmc", field: "bmc"},
            {headerName: "Contract Dum", field: "contract_dum"},
            {headerName: "Contract Item", field: "contract_item"},
            {headerName: "Contract Num", field: "contract_num"},
            {headerName: "Contract Price Total", field: "contract_price_total"},
            {headerName: "Contract Price Unit", field: "contract_price_unit"},
            {headerName: "Delivery Gi Date", field: "delivery_gi_date"},
            {headerName: "Delivery Gi Month Fis", field: "delivery_gi_month_fis"},
            {headerName: "Delivery Gi Quarter Fis", field: "delivery_gi_quarter_fis"},
            {headerName: "Delivery Gi Year Fis", field: "delivery_gi_year_fis"},
            {headerName: "Delivery Item", field: "delivery_item"},
            {headerName: "Delivery Num", field: "delivery_num"},
            {headerName: "Distribution Channel", field: "distribution_channel"},
            {headerName: "Ebr Segment", field: "ebr_segment"},
            {headerName: "End Customer", field: "end_customer"},
            {headerName: "End Customer Cross Buy", field: "end_customer_cross_buy"},
            {headerName: "End Customer Group", field: "end_customer_group"},
            {headerName: "End Customer Industry", field: "end_customer_industry"},
            {headerName: "End Customer Loyalty", field: "end_customer_loyalty"},
            {headerName: "End Customer Name", field: "end_customer_name"},
            {headerName: "End Customer Nielsen Id", field: "end_customer_nielsen_id"},
            {headerName: "Gross Profit", field: "gross_profit", cellRenderer: moneyThousandth,},
            {headerName: "Gross Profit Percent", field: "gross_profit_percent"},
            {headerName: "Gross Profit Scale", field: "gross_profit_scale"},
            {headerName: "Opportunity Item", field: "opportunity_item"},
            {headerName: "Opportunity Num", field: "opportunity_num"},
            {headerName: "Pcacost", field: "pcacost"},
            {headerName: "Prod Activation City", field: "prod_activation_city"},
            {headerName: "Prod Activation Country", field: "prod_activation_country"},
            {headerName: "Prod Activation Date", field: "prod_activation_date"},
            {headerName: "Prod Activation Flag", field: "prod_activation_flag"},
            {headerName: "Prod Activation Province", field: "prod_activation_province"},
            {headerName: "Prod Activation Qty", field: "prod_activation_qty"},
            {headerName: "Prod Biz Group", field: "prod_biz_group"},
            {headerName: "Prod Brand", field: "prod_brand"},
            {headerName: "Prod Cpu", field: "prod_cpu"},
            {headerName: "Prod Family", field: "prod_family"},
            {headerName: "Prod Final Bu", field: "prod_final_bu"},
            {headerName: "Prod First Sellin Date", field: "prod_first_sellin_date"},
            {headerName: "Prod Gpu", field: "prod_gpu"},
            {headerName: "Prod Hdd", field: "prod_hdd"},
            {headerName: "Prod Hierarchy", field: "prod_hierarchy"},
            {headerName: "Prod Material", field: "prod_material"},
            {headerName: "Prod Material Description", field: "prod_material_description"},
            {headerName: "Prod Memory", field: "prod_memory"},
            {headerName: "Prod Os", field: "prod_os"},
            {headerName: "Prod Pod Date", field: "prod_pod_date"},
            {headerName: "Prod Series", field: "prod_series"},
            {headerName: "Prod Ship Date", field: "prod_ship_date"},
            {headerName: "Prod Sn", field: "prod_sn"},
            {headerName: "Prod Wty Base End Date", field: "prod_wty_base_end_date"},
            {headerName: "Prod Wty Base Start Date", field: "prod_wty_base_start_date"},
            {headerName: "Quotation Num", field: "quotation_num"},
            {headerName: "Sales Order Create Date", field: "sales_order_create_date"},
            {headerName: "Sales Order Create Month_fis", field: "sales_order_create_month_fis"},
            {headerName: "Sales Order Create Quarter Fis", field: "sales_order_create_quarter_fis"},
            {headerName: "Sales Order Create Year Fis", field: "sales_order_create_year_fis"},
            {headerName: "Sales Order Item", field: "sales_order_item"},
            {headerName: "Sales Order Num", field: "sales_order_num"},
            {headerName: "Sdrev", field: "sdrev"},
            {headerName: "Sell In Country", field: "sell_in_country"},
            {headerName: "Sell In Country Name", field: "sell_in_country_name"},
            {headerName: "Sell In Qty", field: "sell_in_qty"},
            {headerName: "Sell In Region", field: "sell_in_region"},
            {headerName: "Sold To", field: "sold_to"},
            {headerName: "Sold To Cross Buy", field: "sold_to_cross_buy"},
            {headerName: "Sold To Group", field: "sold_to_group"},
            {headerName: "Sold To Industry", field: "sold_to_industry"},
            {headerName: "Sold To Loyalty", field: "sold_to_loyalty"},
            {headerName: "Sold To Name", field: "sold_to_name"},
            {headerName: "Sold To Nielsen Id", field: "sold_to_nielsen_id"},
          ],
//           rowModelType: 'infinite',
          enableSorting: true,
          toolPanelSuppressRowGroups: true
        },
        fismonths: [],
        // Machine表格详情
        machineFlag: '',
        dialogDetailVisibleMachine: false,
        detailTablePageMachine: 1,
        perDetailTableDataMachine: 500,
        totalDetailTableDataMachine: null,
        gridOptionsDetailDataMachine: {
          columnDefs: [
            // // {headerName: '#', field: "customname", width: 100, enableSorting: false, cellRenderer: index},
            // {headerName: "Customname", field: "customname", tooltipField: "customname"},
            // {headerName: "Contactphone Sc", field: "contactphone_sc"},
            // {headerName: "Email", field: "email"},
            // {headerName: "Street", field: "street"},
            // {headerName: "From", field: "from"}
            // {headerName: "Touchable Person", field: "total"},
            {headerName: "Authority Geo", field: "authority_geo"},
            {headerName: "Billing Date", field: "billing_date"},
            {headerName: "Billing Item", field: "billing_item"},
            {headerName: "Billing Month Fis", field: "billing_month_fis"},
            {headerName: "Billing Num", field: "billing_num"},
            {headerName: "Billing Quarter Fis", field: "billing_quarter_fis"},
            {headerName: "Bmc", field: "bmc"},
            {headerName: "Contract Dum", field: "contract_dum"},
            {headerName: "Contract Item", field: "contract_item"},
            {headerName: "Contract Num", field: "contract_num"},
            {headerName: "Contract Price Total", field: "contract_price_total"},
            {headerName: "Contract Price Unit", field: "contract_price_unit"},
            {headerName: "Delivery Gi Date", field: "delivery_gi_date"},
            {headerName: "Delivery Gi Month Fis", field: "delivery_gi_month_fis"},
            {headerName: "Delivery Gi Quarter Fis", field: "delivery_gi_quarter_fis"},
            {headerName: "Delivery Gi Year Fis", field: "delivery_gi_year_fis"},
            {headerName: "Delivery Item", field: "delivery_item"},
            {headerName: "Delivery Num", field: "delivery_num"},
            {headerName: "Distribution Channel", field: "distribution_channel"},
            {headerName: "Ebr Segment", field: "ebr_segment"},
            {headerName: "End Customer", field: "end_customer"},
            {headerName: "End Customer Cross Buy", field: "end_customer_cross_buy"},
            {headerName: "End Customer Group", field: "end_customer_group"},
            {headerName: "End Customer Industry", field: "end_customer_industry"},
            {headerName: "End Customer Loyalty", field: "end_customer_loyalty"},
            {headerName: "End Customer Name", field: "end_customer_name"},
            {headerName: "End Customer Nielsen Id", field: "end_customer_nielsen_id"},
            {headerName: "Gross Profit", field: "gross_profit", cellRenderer: moneyThousandth},
            {headerName: "Gross Profit Percent", field: "gross_profit_percent"},
            {headerName: "Gross Profit Scale", field: "gross_profit_scale"},
            {headerName: "Opportunity Item", field: "opportunity_item"},
            {headerName: "Opportunity Num", field: "opportunity_num"},
            {headerName: "Pcacost", field: "pcacost"},
            {headerName: "Prod Activation City", field: "prod_activation_city"},
            {headerName: "Prod Activation Country", field: "prod_activation_country"},
            {headerName: "Prod Activation Date", field: "prod_activation_date"},
            {headerName: "Prod Activation Flag", field: "prod_activation_flag"},
            {headerName: "Prod Activation Province", field: "prod_activation_province"},
            {headerName: "Prod Activation Qty", field: "prod_activation_qty"},
            {headerName: "Prod Biz Group", field: "prod_biz_group"},
            {headerName: "Prod Brand", field: "prod_brand"},
            {headerName: "Prod Cpu", field: "prod_cpu"},
            {headerName: "Prod Family", field: "prod_family"},
            {headerName: "Prod Final Bu", field: "prod_final_bu"},
            {headerName: "Prod First Sellin Date", field: "prod_first_sellin_date"},
            {headerName: "Prod Gpu", field: "prod_gpu"},
            {headerName: "Prod Hdd", field: "prod_hdd"},
            {headerName: "Prod Hierarchy", field: "prod_hierarchy"},
            {headerName: "Prod Material", field: "prod_material"},
            {headerName: "Prod Material Description", field: "prod_material_description"},
            {headerName: "Prod Memory", field: "prod_memory"},
            {headerName: "Prod Os", field: "prod_os"},
            {headerName: "Prod Pod Date", field: "prod_pod_date"},
            {headerName: "Prod Series", field: "prod_series"},
            {headerName: "Prod Ship Date", field: "prod_ship_date"},
            {headerName: "Prod Sn", field: "prod_sn"},
            {headerName: "Prod Wty Base End Date", field: "prod_wty_base_end_date"},
            {headerName: "Prod Wty Base Start Date", field: "prod_wty_base_start_date"},
            {headerName: "Quotation Num", field: "quotation_num"},
            {headerName: "Sales Order Create Date", field: "sales_order_create_date"},
            {headerName: "Sales Order Create Month_fis", field: "sales_order_create_month_fis"},
            {headerName: "Sales Order Create Quarter Fis", field: "sales_order_create_quarter_fis"},
            {headerName: "Sales Order Create Year Fis", field: "sales_order_create_year_fis"},
            {headerName: "Sales Order Item", field: "sales_order_item"},
            {headerName: "Sales Order Num", field: "sales_order_num"},
            {headerName: "Sdrev", field: "sdrev"},
            {headerName: "Sell In Country", field: "sell_in_country"},
            {headerName: "Sell In Country Name", field: "sell_in_country_name"},
            {headerName: "Sell In Qty", field: "sell_in_qty"},
            {headerName: "Sell In Region", field: "sell_in_region"},
            {headerName: "Sold To", field: "sold_to"},
            {headerName: "Sold To Cross Buy", field: "sold_to_cross_buy"},
            {headerName: "Sold To Group", field: "sold_to_group"},
            {headerName: "Sold To Industry", field: "sold_to_industry"},
            {headerName: "Sold To Loyalty", field: "sold_to_loyalty"},
            {headerName: "Sold To Name", field: "sold_to_name"},
            {headerName: "Sold To Nielsen Id", field: "sold_to_nielsen_id"},
          ],
//           rowModelType: 'infinite',
          enableSorting: true,
          toolPanelSuppressRowGroups: true
        },
        detailLoading: false,
        detailMachineLoading: false,
        accountLoading: false,
        transactionLoading: false,
        serviceLoading: false,
        isTableRows: [],
        isTableColsOptions: {
          columnDefs: [
            // {headerName: '#', field: "biz_partner", width: 100, enableSorting: false, cellRenderer: index},
            {headerName: "Binding Type", field: "bindingtype"},
            {headerName: "Call Duration", field: "callduration"},
            {headerName: "Customer Name", field: "customername"},
            {headerName: "Detail Time", field: "detailtime"},
            {headerName: "Group Id", field: "groupid"},
            {headerName: "Hold Period", field: "holdperiod"},
            {headerName: "Hot Line", field: "hotline"},
            {headerName: "Is Availibal", field: "isavailibal"},
            {headerName: "Is Callplan", field: "iscallplan"},
            {headerName: "Is Connection", field: "isconnection"},
            {headerName: "isritcode", field: "isritcode"},
            {headerName: "Onsite Number", field: "onsitenumber"},
            {headerName: "Pick Upperiod", field: "pickupperiod"},
            {headerName: "Tel Number", field: "telnumber"},
            // {headerName: "Touchable Person", field: "total"},
          ],
          // rowModelType: 'infinite',
          enableSorting: true,
          toolPanelSuppressRowGroups: true
        },
        osTableRows: [],
        osTableColsOptions: {
          columnDefs: [
            // {headerName: '#', field: "biz_partner", width: 100, enableSorting: false, cellRenderer: index},
            {headerName: "Active Description", field: "activedescription"},
            {headerName: "Active Objective", field: "activeobjective"},
            {headerName: "Advice Id", field: "adviceid"},
            {headerName: "Bo Code", field: "bocode"},
            {headerName: "Cus Name", field: "cus_name"},
            {headerName: "Is Feedback", field: "isfeedback"},
            {headerName: "Is Newbo", field: "isnewbo"},
            {headerName: "Is Plan", field: "isplan"},
            {headerName: "Is Visit", field: "isvisit"},
            {headerName: "Process", field: "process"},
            {headerName: "Product Forecasttotal", field: "productforecasttotal"},
            {headerName: "Project Descriptioin", field: "projectdescriptioin"},
            {headerName: "Schedule Activityid", field: "scheduleactivityid"},
            {headerName: "Suggestion", field: "suggestion"},
            {headerName: "Visit Img", field: "visitimg"},
            {headerName: "Visitor Date", field: "visitordate"},
            {headerName: "Visitor Name", field: "visitorname"},
            {headerName: "Visitor Tel", field: "visitortel"},
            {headerName: "Visit Results", field: "visitresults"},
            // {headerName: "Touchable Person", field: "total"},
          ],
          // rowModelType: 'infinite',
          enableSorting: true,
          toolPanelSuppressRowGroups: true
        },
        isosEchartsObj: {
          isEchart: null,
          osEchart: null
        },
        columnDefs: [
          {headerName: 'Make', field: 'make'},
          {headerName: 'Model', field: 'model'},
          {headerName: 'Price', field: 'price'},
          {headerName: 'Make', field: 'make2'},
          {headerName: 'Model', field: 'model2'},
          {headerName: 'Price', field: 'price2'},
          {headerName: 'Make', field: 'make3'},
          {headerName: 'Model', field: 'model3'},
          {headerName: 'Price', field: 'price3'}
        ],
        rowData: [
          {
            make: 'Toyota',
            model: 'Celica',
            price: 35000,
            make2: 'Toyota',
            model2: 'Celica',
            price2: 35000,
            make3: 'Toyota',
            model3: 'Celica',
            price3: 35000
          },
          {
            make: 'Toyota',
            model: 'Celica',
            price: 35000,
            make2: 'Toyota',
            model2: 'Celica',
            price2: 35000,
            make3: 'Toyota',
            model3: 'Celica',
            price3: 35000
          },
          {
            make: 'Toyota',
            model: 'Celica',
            price: 35000,
            make2: 'Toyota',
            model2: 'Celica',
            price2: 35000,
            make3: 'Toyota',
            model3: 'Celica',
            price3: 35000
          },
          {
            make: 'Toyota',
            model: 'Celica',
            price: 35000,
            make2: 'Toyota',
            model2: 'Celica',
            price2: 35000,
            make3: 'Toyota',
            model3: 'Celica',
            price3: 35000
          },
          {
            make: 'Toyota',
            model: 'Celica',
            price: 35000,
            make2: 'Toyota',
            model2: 'Celica',
            price2: 35000,
            make3: 'Toyota',
            model3: 'Celica',
            price3: 35000
          },
          {
            make: 'Toyota',
            model: 'Celica',
            price: 35000,
            make2: 'Toyota',
            model2: 'Celica',
            price2: 35000,
            make3: 'Toyota',
            model3: 'Celica',
            price3: 35000
          },
          {
            make: 'Toyota',
            model: 'Celica',
            price: 35000,
            make2: 'Toyota',
            model2: 'Celica',
            price2: 35000,
            make3: 'Toyota',
            model3: 'Celica',
            price3: 35000
          },
          {
            make: 'Toyota',
            model: 'Celica',
            price: 35000,
            make2: 'Toyota',
            model2: 'Celica',
            price2: 35000,
            make3: 'Toyota',
            model3: 'Celica',
            price3: 35000
          },
          {
            make: 'Toyota',
            model: 'Celica',
            price: 35000,
            make2: 'Toyota',
            model2: 'Celica',
            price2: 35000,
            make3: 'Toyota',
            model3: 'Celica',
            price3: 35000
          },
          {
            make: 'Toyota',
            model: 'Celica',
            price: 35000,
            make2: 'Toyota',
            model2: 'Celica',
            price2: 35000,
            make3: 'Toyota',
            model3: 'Celica',
            price3: 35000
          },
          {
            make: 'Toyota',
            model: 'Celica',
            price: 35000,
            make2: 'Toyota',
            model2: 'Celica',
            price2: 35000,
            make3: 'Toyota',
            model3: 'Celica',
            price3: 35000
          },
        ],
        optionColors: ['#59c4e6', '#ffb980', '#0090e9', '#6be6c1', '#b692df', '#edafda', '#59c4e6', '#ffb980', '#0090e9', '#6be6c1', '#b692df', '#edafda'],
        negColor: {
          startColor: '#913af6',
          endColor: '#3d62f2',
        },
        posColor: {
          startColor: '#c24039',
          endColor: '#f08351',
        },
        // warrantyBarColor: {
        //   colorRed: '#b70303',
        //   colorOrange: '#ee8050',
        //   colorBlue: '#0090e9',
        //   colorGreen: '#00a61f'
        // },
        warrantyBarColor: {
          expired_30: '#fab478',
          expired_60: '#f8c36f',
          expired_90: '#f79169',
          expire_in_30: '#1bd85c',
          expire_in_60: '#41cc3e',
          expire_in_90: '#03af3f'
        },
        busValue: [],
        productsValue: [],
        warrantyVisible: false, // 控制warrantyBar dialog的显示和隐藏
        warrantyBar: '',
        warrantyBarTitle: '',
        warrantyBarAxisY: '',
        warrantyBarData: '',
        showLoading: false,
        warrantyBarLoading: true,
        // loading
        accountPieLoading: false,
        accountBarLoading: false,
        accountLineLoading: false,
        machineBarLoading: false,
        claimPieLoading: false,
        claimBarLoading: false,
        claimLineLoading: false,
        claimBar2Loading: false,
        // 联动后表格新增参数=》确保滚动加载时也可以传入参数
        accountAreas: [],
        accountBpNums: [],
        machineProducts: [],
        machineBu: [],
        machineFlg: 0, // 用于判断钻去前后，表格应该执行哪个函数；因为传参不一样，0是bu,1是pro
        claimAreas: [],
        claimBpNums: [],
        claimBus: [],
        claimProducts: [],
        claimBpIdParams: [], // claim下返回的bpID数组，用于传参辨识
        gridOptions: {
          context: {
            componentParent: this
          },
          toolPanelSuppressRowGroups: true,
          // rowModelType: 'infinite',
          enableSorting: true
        },
        touchablePersonList: {
          columnDefs: [
            // {headerName: '#', field: "bp_number", width: 100, enableSorting: false, cellRenderer: index},
            {headerName: "Customname", field: "customname", tooltipField: "customname"},
            {headerName: "Contactphone Sc", field: "contactphone_sc"},
            {headerName: "Email", field: "email"},
            {headerName: "Street", field: "street"},
            {headerName: "From", field: "from"}
            // {headerName: "Touchable Person", field: "total"},
          ],
          // rowModelType: 'infinite',
          enableSorting: true,
          toolPanelSuppressRowGroups: true
        },
        gridOptionsTouchablePersonList: {
          columnDefs: [
            // {headerName: '#', field: "customname", width: 100, enableSorting: false, cellRenderer: index},
            {headerName: "Customname", field: "customname", tooltipField: "customname"},
            {headerName: "Contactphone Sc", field: "contactphone_sc"},
            {headerName: "Email", field: "email"},
            {headerName: "Street", field: "street"},
            {headerName: "From", field: "from"}
            // {headerName: "Touchable Person", field: "total"},
          ],
          // rowModelType: 'infinite',
          enableSorting: true,
          toolPanelSuppressRowGroups: true
        },
        claimOptions: {
          columnDefs: [
            // {headerName: '#', field: "biz_partner", width: 100, enableSorting: false, cellRenderer: index},
            {headerName: "Sold To", field: "sold_to", tooltipField: "customname", cellStyle: {cursor: 'pointer'}},
            {headerName: "Sold To Name", field: "sold_to_name", tooltipField: "customname"},
            {headerName: "Prod Sn", field: "prod_sn", tooltipField: "customname"},
            {headerName: "BU", field: "prod_final_bu"},
            {headerName: "Prod Brand", field: "prod_brand"},
            {headerName: "Prod Series", field: "prod_series"},
            {headerName: "Prod Family", field: "prod_family"},
            {headerName: "Billing Date", field: "billing_date"},
            {headerName: "Service Mode", field: "service_mode"},
            {headerName: "Service Create Date", field: "service_create_date"},
            {headerName: "Service Deliver Type", field: "service_deliver_type"},
            // {headerName: "Street", field: "street"},
            {headerName: "Service Close Date", field: "service_close_date"}
            // {headerName: "Touchable Person", field: "total"},
          ],
          // rowModelType: 'infinite',
          enableSorting: true,
          toolPanelSuppressRowGroups: true
        },
        // isosOptions: {
        //   columnDefs: [
        //     // {headerName: '#', field: "biz_partner", width: 100, enableSorting: false, cellRenderer: index},
        //     {headerName: "Sold To", field: "sold_to", tooltipField: "customname", cellStyle: {cursor: 'pointer'}},
        //     {headerName: "Sold To Name", field: "sold_to_name", tooltipField: "customname"},
        //     {headerName: "Prod Sn", field: "prod_sn", tooltipField: "customname"},
        //     {headerName: "BU", field: "prod_final_bu"},
        //     {headerName: "Prod Brand", field: "prod_brand"},
        //     {headerName: "Prod Series", field: "prod_series"},
        //     {headerName: "Prod Family", field: "prod_family"},
        //     {headerName: "Billing Date", field: "billing_date"},
        //     {headerName: "Actualservicemode S", field: "actualservicemode_s"},
        //     {headerName: "Createtime", field: "createtime"},
        //     {headerName: "Zsrv Styp", field: "zsrv_styp"},
        //     {headerName: "Street", field: "street"},
        //     {headerName: "Close Time", field: "closetime"}
        //     // {headerName: "Touchable Person", field: "total"},
        //   ],
        //   // rowModelType: 'infinite',
        //   enableSorting: true,
        //   toolPanelSuppressRowGroups: true
        // },
        machineOptions: {
          columnDefs: [
            // {headerName: '#', field: "bp_number", width: 100, enableSorting: false, cellRenderer: index},
            // {headerName: "ID", field: "bp_number", cellStyle: {cursor: 'pointer'}},
            {headerName: "Sold To", field: "sold_to", cellStyle: {cursor: 'pointer'}},
            {headerName: "Sold To Name", field: "sold_to_name"},
            {headerName: "End Customer", field: "end_customer"},
            {headerName: "End Customer Name", field: "end_customer_name"},
            {headerName: "Sell In Country", field: "sell_in_country"},
            {headerName: "Distribution Channel", field: "distribution_channel"},
            {headerName: "BU", field: "prod_final_bu"},
            {headerName: "Prod Brand", field: "prod_brand"},
            {headerName: "Prod Series", field: "prod_series"},

            {headerName: "Prod Family", field: "prod_family"},
            {headerName: "Prod Material", field: "prod_material"},
            {headerName: "Prod Material Description", field: "prod_material_description"},
            {
              headerName: "Sell In Qty",
              field: "sell_in_qty",
              cellRenderer: Thousandth,
              filter: "agNumberColumnFilter",
              type: "numericColumn"
            },
            {
              headerName: "Sdrev(K$)",
              field: "sdrev",
              cellRenderer: moneyThousandth,
              filter: "agNumberColumnFilter",
              type: "numericColumn"
            },
            {
              headerName: "Gross_Profit(K$)",
              field: "gross_profit",
              cellRenderer: moneyThousandth,
              filter: "agNumberColumnFilter",
              type: "numericColumn"
            }

            // {headerName: "Customer Name", field: "bp_name", tooltipField: "bp_name"},
            // {headerName: "Contract Number", field: "contract"},
            // {headerName: "Sell In Country Code", field: "country"},
            // {headerName: "Model/Family", field: "product", tooltipField: "product"},
            // {headerName: "Material Number", field: "material", tooltipField: "material"},
            // {headerName: "Material Description", field: "material_description", tooltipField: "material_description"},
            // {headerName: "Sales Order Number", field: "sales_order"},
            // {headerName: "Delivery Note Number", field: "delivery_notes"},
            // {headerName: "Billing Number", field: "billings"},
            // {headerName: "Billing Date", field: "billing_date"},
            // {
            //   headerName: "Sell In",
            //   field: "ca",
            //   cellRenderer: Thousandth,
            //   filter: "agNumberColumnFilter",
            //   type: "numericColumn"
            // },
            // {
            //   headerName: "Revenue(K$)",
            //   field: "revenue",
            //   cellRenderer: moneyThousandth,
            //   filter: "agNumberColumnFilter",
            //   type: "numericColumn"
            // },
            // {headerName: "Touchable Person", field: "total"},
          ],
          // rowModelType: 'infinite',
          enableSorting: true,
          toolPanelSuppressRowGroups: true
        },

        // 联动后表格新增参数=》确保滚动加载时也可以传入参数
        accountAreas: [],
        accountBpNums: [],
        // datadata: '比卡',
        Ban: false, // 选择框是否禁用
        geoBan: false,
        regionBan: false,
        countryBan: false,
        returnIcon: false, // 钻去后的返回icon
        claimReturnIcon: false,
        title: false,
        searchTag: {
          bpNumber: '',
          tagTitle: '',
          tagsPrivate: [],
          tagsPrivateTips: [],
          tagShow: [],
          tagTips: [],
          tagTipsZh: [],
          tagTipsEn: [],
          website: '',
          tagNumber: '',
          handleWebsite: ''
        },
        companyInfo: {
          register_number: '',
          organization_code: '',
          redistration_authority: '',
          social_credit_code: '',
          company_type: '',
          redistration_address: '',
          corporation_tax: '',
          industry: '',
          operating_term: '',
          company_scope: '',
          approval_date: ''
        },
        activeNames: ['1'],
        tabLoading: false,
        tabLoadingNew: false,
//        tabLoading2: true,
        searchItem: getsearchItem(),
//        activeName: '1',
        hideList: true,
//        tabHeight:window.innerHeight*0.54,
        tabHeight: window.innerHeight * 0.6,
        show: '1',
        radio1: '1',
        radio2: '1',
        radio3: '1',
        // k线股票数据
        stock: {
          stockName: '联想控股',
          stockCode: '60028',
          stockIndex: 6.21,
          stockOpen: 5.55,
          stockHigh: 5.55,
          stockLow: 5.55,
          stockClose: 5.55,
          tradingVolume: 5.55,
          transactionAmount: 5.55,
          shanghaiIndex: 11.11,
          usIndex: 11.11,
          japanIndex: 11.11,
          refreshTime: '2018/1/11',
          dataSource: '新浪财经'
        },
        stockHistory: {
          stockTime: [],
          stockData: []
        },
        // 表格数据
        personListTab: {
          personListData: [],
          personListDataNew: [],
          total: null,
          search: '',
          totalNew: null,
          // 分页
          currentPage1: 1,
          currentPageNew: 1,
          pageSize1: 50,
          pageSizeNew: 50,
        },
        // 新改版
        // Account: {},
        // Machine: {},
        // Service: {},
        // 新改版
        warrantyData: {
          neg1: '', // 负的
          neg2: '',
          neg3: '',
          pos1: '', // 正的
          pos2: '',
          pos3: ''
        },
        AccountList: {
          dialogVisible: false,
          touchablePersonListId: '',
          checkbox: {
            checked1: true,
            checked2: true,
            checked3: true,
            ID: true,
            Name: true,
            Geo: true
          },
          search: '',
          ListTableData: [],
          total: null,
          // 分页
          currentPage2: 1,
          pageSize2: 50
        },
        TransactionDocument: {
          transactionTableData: [],
          total: null,
          search: '',
          pageSize3: 50,
          currentPage3: 1
        },
        Machine: {
          machineTableData: [],
          total: null,
          pageSize4: 30,
          currentPage4: 1
        },
        Service: {
          serviceTableData: [],
          total: null,
          search: '',
          bpClaim: null,
          pageSize5: 50,
          currentPage5: 1
        },
        echartsxDatas: [],
        echartsDatas: [],
        echartsData1: [],
        echartsData2: [],
        echartsData3: [],
        echartsData4: [],
        graphData: [],
        // 新增图表数据
        accountPieDatas: [],
        accountPieData1: [],
        accountPieData2: [],
        accountPieData3: [],
        accountBarDatas: [],
        accountBarData1: [],
        accountBarData2: [],
        accountBarData3: [],
        machineBarDatas: [],
        machineBarData1: [],
        machineBarData2: [],
        machineBarData3: [],
        // Account List
        geoData: [],
        geoValue: [],
        regionData: [],
        regionValue: [],
        countryData: [],
        countryValue: [],
        accountYearData: [],
        accountYearValue: [],
        finalBuData: [],
        finalBuValue: [],
        accountPieRevenue: {},
        accountPieMachine: {},
        accountBarRevenue: {},
        accountBarMachine: {},
        // transaction
        radioTransaction: 1,
        transactionDropSelect: [],
        geoDataTransaction: [],
        geoValueTransaction: [],
        regionDataTransaction: [],
        regionValueTransaction: [],
        countryDataTransaction: [],
        countryValueTransaction: [],
        transactionYearData: [],
        transactionYearValue: [],
        // machine
        radioMachine: 1,
        geoDataMachine: [],
        geoValueMachine: [],
        regionDataMachine: [],
        regionValueMachine: [],
        countryDataMachine: [],
        countryValueMachine: [],
        machineYearData: [],
        machineYearValue: [],
        // service
        radioService: 1,
        geoDataService: [],
        geoValueService: [],
        regionDataService: [],
        regionValueService: [],
        countryDataService: [],
        countryValueService: [],
        serviceYearData: [],
        serviceYearValue: [],
        // 路由传参
        search_value: '',
        result_flag: '',
        result_name: '',
        pos30Data: {
          name: [],
          Data: []
        }
      }
    },
    methods: {
      checkPermission_BG,
      loadIsTableData() {
        this.http.get('../../../static/json/is.json').then(res => {
          let resData = res.data
          this.isTableRows = resData
        })
      },
      loadOsTableData() {
        this.http.get('../../../static/json/os.json').then(res => {
          let resData = res.data
          this.osTableRows = resData
        })
      },
      showIsEcharts() {
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: ['2018-01', '2018-02', '2018-03', '2018-04', '2018-05', '2018-06', '2018-07'],
            axisLabel: {
              interval: 0,
              // rotate: 40,
              color: '#959eaf'
            },
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            },
            axisLabel: {
              interval: 0,
              color: '#959eaf',
              fontSize: 12
            },
          },
          series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#5ab1ef'
              }
            },
            barWidth: 60
          }]
        }
        this.isosEchartsObj.isEchart.setOption(option)
      },
      showOsEcharts() {
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: ['2018-01', '2018-02', '2018-03', '2018-04', '2018-05', '2018-06', '2018-07'],
            axisLabel: {
              interval: 0,
              // rotate: 40,
              color: '#959eaf'
            },
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            },
            axisLabel: {
              interval: 0,
              color: '#959eaf',
              fontSize: 12
            },
          },
          series: [{
            data: [40, 100, 150, 90, 50, 50, 130],
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#5ab1ef'
              }
            },
            barWidth: 60
          }]
        }
        this.isosEchartsObj.osEchart.setOption(option)
      },
      toNewPage () { // 跳转新的页面
        this.$router.push({path: './companyDetails', query: this.$route.query})
      },
      // 机器维保弹框echarts柱状图
      // async showWarranty(bus,products,wty_flag,startColor,endColor,target){
      async showWarranty(bus, products, wty_flag, barColor, target){
        const _this = this
        this.machineFlag = wty_flag
        if (target != 0) {
          this.warrantyVisible = true
          try {
            let res = await this.axios.post('/search/warrantyCardDetailForMachineTab.do', {
              username: getUsername(),
              tablename: 'machine', // 固定
              geos: this.geoValue,
              regions: this.regionValue,
              countrys: this.countryValue,
              fisyears: this.accountYearValue,
              bus: this.busValue,
              products: this.productsValue,
              flag: this.result_flag,
              search_value: _this.search_value,
              wty_flag: wty_flag
            })
            let resData = res.data.data.data.sort(function (a, b) {
              return a.count - b.count
            })
            let axisYData = []
            let barData = []
            this.warrantyBar = this.echarts.init(document.getElementById('warrantyBar'), null, {render: 'canvas'})
            // 数据为空时，提示文字noData
            if (resData.length === 0) {
              this.warrantyBar.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              })
            } else {
              let warrantyBar = document.getElementById("warrantyBar")
              var barHeight = 20
              let bars = resData.length
              warrantyBar.style.height = (bars * barHeight) + 'px'
              for (const i in resData) {
                axisYData.push(resData[i].prod_family)
                barData.push(resData[i].count)
              }
              let option = {
                grid: {
                  top: 0,
                  left: '40%',
                  bottom: 5
                },
                // dataZoom: [{
                //   type: 'slider',
                //   show: true,
                //   showDetail: false,
                //   zoomLock: true,
                //   yAxisIndex: [0],
                //   startValue: 0,
                //   endValue: 5,
                //   handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                //   handleSize: '80%',
                //   width: 12,
                //   handleStyle: {
                //     color: '#fff',
                //     shadowBlur: 3,
                //     shadowColor: 'rgba(0, 0, 0, 0.6)',
                //   }
                // }],
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  },
                  backgroundColor: 'rgba(255,255,255,1)',
                  padding: [5, 10],
                  textStyle: {
                    color: '#7588E4'
                  },
                  extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
                },
                xAxis: {
                  type: 'value',
                  axisLine: {
                    show: false
                  },
                  axisLabel: {
                    fontSize: 9,
                    color: '#959eaf'
                  },
                  axisTick: {
                    show: false
                  },
                  splitLine: {
                    show: false
                  }
                },
                yAxis: {
                  type: 'category',
                  axisLine: {
                    lineStyle: {
                      color: '#f5f5f9'
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    interval: 0,
                    color: '#14142d',
                    fontFamily: 'Helvetica Regular',
                    fontSize: 12
                  },
                  data: axisYData
                },
                series: [{
                  data: barData,
                  type: 'bar',
                  barMaxWidth: 12,
                  barGap: 18,
                  label: {
                    show: true,
                    position: 'right',
                    color: '#959eaf',
                    fontFamily: 'Helvetica Regular',
                    fontSize: 11
                  },
                  itemStyle: {
                    normal: {
                      color: barColor,
                      // color: {
                      //   type: 'linear',
                      //   x: 0,
                      //   y: 1,
                      //   x2: 1,
                      //   y2: 0,
                      //   colorStops: [{
                      //     offset: 0, color: startColor // 0% 处的颜色
                      //   }, {
                      //     offset: 1, color: endColor // 100% 处的颜色
                      //   }],
                      //   globalCoord: false // 缺省为 false
                      // },
                      // barBorderRadius: [0, 7, 7, 0]
                    }
                  }
                }]
              }
              this.warrantyBar.hideLoading()
              this.warrantyBar.clear()
              this.warrantyBar.setOption(option)
              setTimeout(function () {
                _this.warrantyBar.resize()
              }, 200)
              this.warrantyBar.off('click')
              this.warrantyBar.on('click', function (params) {
                this.prodFamily = params.name
                sessionStorage.setItem('prod_family', params.name)
                _this.perDetailTableDataMachine = 500
                _this.detailTablePageMachine = 1
                _this.toMachineDetail([params.name])
              })
            }
            // 标题对应
            this.warrantyBarTitle = ''
            if (wty_flag == 'expired_90') {
              this.warrantyBarTitle = this.$t('newSearchResult.neg90')
            }
            if (wty_flag == 'expired_60') {
              this.warrantyBarTitle = this.$t('newSearchResult.neg60')
            }
            if (wty_flag == 'expired_30') {
              this.warrantyBarTitle = this.$t('newSearchResult.neg30')
            }
            if (wty_flag == 'expire_in_30') {
              this.warrantyBarTitle = this.$t('newSearchResult.pos30')
            }
            if (wty_flag == 'expire_in_60') {
              this.warrantyBarTitle = this.$t('newSearchResult.pos60')
            }
            if (wty_flag == 'expire_in_90') {
              this.warrantyBarTitle = this.$t('newSearchResult.pos90')
            }
          } catch (error) {
            console.log(error)
            this.warrantyBar = _this.echarts.init(document.getElementById('warrantyBar'), null, {render: 'canvas'})
            this.warrantyBar.showLoading('default', {
              text: 'No Data',
              color: '#fff',
              textColor: '#959595',
              maskColor: 'rgb(255, 255, 255)',
              zlevel: 0
            })
          }
          this.warrantyBarLoading = false
        }
      },
      clearWarrantyBarData(){
        this.warrantyBar = this.echarts.init(document.getElementById('warrantyBar'), null, {render: 'canvas'})
        this.warrantyBar.clear()
        this.warrantyVisible = false
        this.warrantyBarLoading = true
      },

      enOptions() { //将表格表头改为英文
        // this.gridOptions.api.setColumnDefs([
        //   {headerName: '#', field: "bp_number", width: 100, enableSorting: false, cellRenderer: index},
        //   {headerName: "ID", field: "bp_number"},
        //   {headerName: "Name", field: "bp_name", tooltipField: "bp_name"},
        //   {headerName: "GEO", field: "geo"},
        //   {headerName: "Region", field: "region"},
        //   {headerName: "Country", field: "country_code"},
        //   {headerName: "Nielsen", field: "nielson"},
        //   {headerName: "GLN", field: "gln"},
        //   {headerName: "Duns", field: "duns"},
        //   {headerName: "Machines", field: "machines", cellRenderer: Thousandth, filter: "agNumberColumnFilter", type: "numericColumn"},
        //   {headerName: "Revenue(K$)", field: "rev", cellRenderer: Thousandth, filter: "agNumberColumnFilter", type: "numericColumn"},
        //   {headerName: "Touchable Person", field: "contact", cellRendererFramework: TouchablePersonIcon},
        // ])
        // this.touchablePersonList.api.setColumnDefs([
        //   {headerName: '#', field: "bp_number", width: 100, enableSorting: false, cellRenderer: index},
        //   {headerName: "Name", field: "customname", tooltipField: "customname"},
        //   {headerName: "Phone", field: "contactphone_sc"},
        //   {headerName: "Email", field: "email"},
        //   {headerName: "Address", field: "coustomaddress_sc"},
        //   {headerName: "From", field: "from"}
        //   // {headerName: "Touchable Person", field: "total"},
        // ])
        // this.gridOptionsTouchablePersonList.api.setColumnDefs([
        //   {headerName: '#', field: "bp_number", width: 100, enableSorting: false, cellRenderer: index},
        //   {headerName: "Name", field: "customname", tooltipField: "customname"},
        //   {headerName: "Phone", field: "contactphone_sc"},
        //   {headerName: "Email", field: "email"},
        //   {headerName: "Address", field: "coustomaddress_sc"},
        //   {headerName: "From", field: "from"}
        //   // {headerName: "Touchable Person", field: "total"},
        // ])
        // this.machineOptions.api.setColumnDefs([
        //   {headerName: '#', field: "bp_number", width: 100, enableSorting: false, cellRenderer: index},
        //   {headerName: "ID", field: "bp_number"},
        //   {headerName: "Name", field: "bp_name", tooltipField: "bp_name"},
        //   {headerName: "Contract", field: "contract"},
        //   {headerName: "Country", field: "country"},
        //   {headerName: "Product", field: "product", tooltipField: "product"},
        //   {headerName: "Material", field: "material", tooltipField: "material"},
        //   {headerName: "Material Description", field: "material_description", tooltipField: "material_description"},
        //   {headerName: "Sales Order", field: "sales_order"},
        //   {headerName: "Delivery Notes", field: "delivery_notes"},
        //   {headerName: "Billing", field: "billings"},
        //   {headerName: "Billing Date", field: "billing_date"},
        //   {headerName: "Sell In", field: "ca", cellRenderer: Thousandth, filter: "agNumberColumnFilter", type: "numericColumn"},
        //   {headerName: "Revenue(K$)", field: "revenue", cellRenderer: Thousandth, filter: "agNumberColumnFilter", type: "numericColumn"},
        //   // {headerName: "Touchable Person", field: "total"},
        // ])
        // this.claimOptions.api.setColumnDefs([
        //   {headerName: '#', field: "biz_partner", width: 100, enableSorting: false, cellRenderer: index},
        //   {headerName: "Id", field: "biz_partner", tooltipField: "customname"},
        //   {headerName: "Name", field: "bp_name", tooltipField: "customname"},
        //   {headerName: "Serial Number", field: "serial_number", tooltipField: "customname"},
        //   {headerName: "Sell In Date", field: "sell_in_date"},
        //   {headerName: "Service Type", field: "service_type"},
        //   {headerName: "Service Date", field: "service_date"},
        //   {headerName: "Service Node", field: "service_node"},
        //   {headerName: "Service Addr", field: "service_addr"},
        //   {headerName: "Close Date", field: "close_date"}
        //   // {headerName: "Touchable Person", field: "total"},
        // ])
        // this.gridOptions.api.sizeColumnsToFit()
        // this.gridOptionsTouchablePersonList.api.sizeColumnsToFit()
        // this.touchablePersonList.api.sizeColumnsToFit()
        // this.machineOptions.api.sizeColumnsToFit()
        // this.claimOptions.api.sizeColumnsToFit()
      },
      zhOptions() {
        // this.gridOptions.api.setColumnDefs([
        //   {headerName: '#', field: "bp_number", width: 100, enableSorting: false, cellRenderer: index},
        //   {headerName: "编号", field: "bp_number"},
        //   {headerName: "姓名", field: "bp_name", tooltipField: "bp_name"},
        //   {headerName: "GEO", field: "geo"},
        //   {headerName: "Region", field: "region"},
        //   {headerName: "国家", field: "country_code"},
        //   {headerName: "Nielsen", field: "nielson"},
        //   {headerName: "GLN", field: "gln"},
        //   {headerName: "Duns", field: "duns"},
        //   {headerName: "机器数量", field: "machines", cellRenderer: Thousandth, filter: "agNumberColumnFilter", type: "numericColumn"},
        //   {headerName: "主营业务收入(K$)", field: "rev", cellRenderer: Thousandth, filter: "agNumberColumnFilter", type: "numericColumn"},
        //   {headerName: "Touchable Person", field: "contact", cellRendererFramework: TouchablePersonIcon},
        // ])
        // this.touchablePersonList.api.setColumnDefs([
        //   {headerName: '#', field: "bp_number", width: 100, enableSorting: false, cellRenderer: index},
        //   {headerName: "姓名", field: "customname", tooltipField: "customname"},
        //   {headerName: "电话", field: "contactphone_sc"},
        //   {headerName: "邮件", field: "email"},
        //   {headerName: "地址", field: "coustomaddress_sc"},
        //   {headerName: "来源", field: "from"}
        //   // {headerName: "Touchable Person", field: "total"},
        // ])
        // this.gridOptionsTouchablePersonList.api.setColumnDefs([
        //   {headerName: '#', field: "bp_number", width: 100, enableSorting: false, cellRenderer: index},
        //   {headerName: "姓名", field: "customname", tooltipField: "customname"},
        //   {headerName: "电话", field: "contactphone_sc"},
        //   {headerName: "邮件", field: "email"},
        //   {headerName: "地址", field: "coustomaddress_sc"},
        //   {headerName: "来源", field: "from"}
        //   // {headerName: "Touchable Person", field: "total"},
        // ])
        // this.machineOptions.api.setColumnDefs([
        //   {headerName: '#', field: "bp_number", width: 100, enableSorting: false, cellRenderer: index},
        //   {headerName: "编号", field: "bp_number"},
        //   {headerName: "名称", field: "bp_name", tooltipField: "bp_name"},
        //   {headerName: "合同号", field: "contract"},
        //   {headerName: "国家", field: "country"},
        //   {headerName: "产品", field: "product", tooltipField: "product"},
        //   {headerName: "物料编码", field: "material", tooltipField: "material"},
        //   {headerName: "物料描述", field: "material_description", tooltipField: "material_description"},
        //   {headerName: "销售订单", field: "sales_order"},
        //   {headerName: "发货单号", field: "delivery_notes"},
        //   {headerName: "发票号", field: "billings"},
        //   {headerName: "开票时间", field: "billing_date"},
        //   {headerName: "销量", field: "ca", cellRenderer: Thousandth, filter: "agNumberColumnFilter", type: "numericColumn"},
        //   {headerName: "收入(K$)", field: "revenue", cellRenderer: Thousandth, filter: "agNumberColumnFilter", type: "numericColumn"},
        //   // {headerName: "Touchable Person", field: "total"},
        // ])
        // this.claimOptions.api.setColumnDefs([
        //   {headerName: '#', field: "biz_partner", width: 100, enableSorting: false, cellRenderer: index},
        //   {headerName: "编号", field: "biz_partner", tooltipField: "customname"},
        //   {headerName: "名称", field: "bp_name", tooltipField: "customname"},
        //   {headerName: "产品序列号", field: "serial_number", tooltipField: "customname"},
        //   {headerName: "销售日期", field: "sell_in_date"},
        //   {headerName: "服务类型", field: "service_type"},
        //   {headerName: "服务日期", field: "service_date"},
        //   {headerName: "服务方式", field: "service_node"},
        //   {headerName: "服务地点", field: "service_addr"},
        //   {headerName: "关单日期", field: "close_date"}
        //   // {headerName: "Touchable Person", field: "total"},
        // ])

        // this.gridOptions.api.sizeColumnsToFit()
        // this.touchablePersonList.api.sizeColumnsToFit()
        // this.gridOptionsTouchablePersonList.api.sizeColumnsToFit()
        // this.machineOptions.api.sizeColumnsToFit()
        // this.claimOptions.api.sizeColumnsToFit()
      },
      initOptions() { // 进入页面加载中英文表头
        if (this.language === 'en') {
          this.enOptions()
        } else {
          this.zhOptions()
        }
      },
      createAccountProfileColumnDefs() {
        this.gridOptions.columnDefs = [
          // {headerName: '#', field: "bp_number", width: 100, enableSorting: false, cellRenderer: index},
          {headerName: "ID", field: "customer", cellStyle: {cursor: 'pointer'}},
          {headerName: "Name", field: "customer_name", tooltipField: "bp_name"},
          {headerName: "Geo", field: "customer_geo"},
          {headerName: "Region", field: "customer_region"},
          {headerName: "Country Code", field: "customer_country_code"},
          {headerName: "Nielsen ID", field: "customer_nielsen_id"},
          {headerName: "GLN", field: "zbp_gln"},
          {headerName: "DUNS", field: "sfdc_duns"},
          {headerName: "Fiscal Year", field: "billing_year_fis"},
          {headerName: "BU", field: "prod_final_bu"},
          {headerName: "DMU", field: "dmu_id"},
          {
            // headerName: "Machines",
            headerName: "Sell In Qty",
            field: "sell_in_qty",
            cellRenderer: Thousandth,
            filter: "agNumberColumnFilter",
            type: "numericColumn"
          },
          {
            headerName: "Sdrev($K)",
            field: "sdrev",
            cellRenderer: moneyThousandth,
            filter: "agNumberColumnFilter",
            type: "numericColumn"
          },
          {
            headerName: "Gross Profit($K)",
            field: "gross_profit",
            cellRenderer: moneyThousandth,
            filter: "agNumberColumnFilter",
            type: "numericColumn"
          },
          {headerName: "Contact", field: "contact", cellRendererFramework: TouchablePersonIcon},
          {headerName: "Search Detail", field: "contact", cellRendererFramework: SearchDetailIcon},
        ]
      },
      methodFromParent(cell) { // 获取表格icon对应的id
        this.AccountList.touchablePersonListId = cell.node.data.customer
        this.loadPersonList2(cell.node.data.customer)
        this.AccountList.dialogVisible = true
      },
      methodToDetail(params) {
        // console.log('看到JFK大家')
        // console.log(params)
        let paramsID = params.node.data.customer
        this.snBpNums = paramsID
        this.loadDetailData(paramsID)
        this.dialogDetailVisible = true
      },
      globalSearch(options, value) {
        eval(`this.${options}.api.setQuickFilter(this.${value})`)
      },
      personListPageSizeChange(size) {
        this.personListTab.pageSize1 = size
        this.personListTab.currentPage1 = 1;
        this.loadPersonList()
      },
      personListCurrentChange(page) {
        this.personListTab.currentPage1 = page
        this.loadPersonList()
      },
      gridOptionsTouchablePersonListPageSizeChange(size) {
        this.personListTab.pageSizeNew = size
        this.personListTab.currentPageNew = 1;
        this.loadPersonList2(this.AccountList.touchablePersonListId)
      },
      gridOptionsTouchablePersonListCurrentChange(page) {
        this.personListTab.currentPageNew = page
        this.loadPersonList2(this.AccountList.touchablePersonListId)
      },
      prestoPersonListPageSizeChange(size) {
        this.personListTab.pageSizeNew = size
        this.personListTab.currentPageNew = 1;
        this.prestoPersonListHandleData()
      },
      prestoPersonListCurrentChange(size) {
        this.personListTab.currentPageNew = size// 设置当前页是第几页
        this.prestoPersonListHandleData()
      },
      prestoPersonListHandleData() {
        this.gridOptionsTouchablePersonList.api.setRowData(this.personListTab.personListDataNew.slice((this.personListTab.currentPageNew - 1) * this.personListTab.pageSizeNew, this.personListTab.currentPageNew * this.personListTab.pageSizeNew))
      },
      detailTablePageSizeChange(size) {
        this.perDetailTableData = size;
        this.detailTablePage = 1;
        this.loadDetailData(this.snBpNums)
      },
      detailTableCurrentChange(page) {
        this.detailTablePage = page;
        this.loadDetailData(this.snBpNums)
      },
      prestoDetailTablePageSizeChange(size) {
        this.perDetailTableData = size
        this.detailTablePage = 1;
        this.prestoDetailTableHandleData()
      },
      prestoDetailTableCurrentChange(size) {
        this.detailTablePage = size// 设置当前页是第几页
        this.prestoDetailTableHandleData()
      },
      prestoDetailTableHandleData() {
        this.gridOptionsTouchablePersonList.api.setRowData(this.totalDetailTableData.slice((this.detailTablePage - 1) * this.perDetailTableData, this.detailTablePage * this.perDetailTableData))
      },
      detailTablePageSizeChangeMachine(size) {
        this.perDetailTableDataMachine = size
        this.prodFamily = sessionStorage.getItem('prod_family')
        this.detailTablePageMachine = 1
        this.toMachineDetail([this.prodFamily])
      },
      detailTableCurrentChangeMachine(page) {
        this.detailTablePageMachine = page
        this.prodFamily = sessionStorage.getItem('prod_family')
        this.toMachineDetail([this.prodFamily])
      },
      accountProfilePageSizeChange(size) {
        this.AccountList.pageSize2 = size
        this.AccountList.currentPage2 = 1;
        this.loadAccountList(this.accountAreas, this.accountBpNums)
      },
      accountProfileCurrentChange(page) {
        this.AccountList.currentPage2 = page
        this.loadAccountList(this.accountAreas, this.accountBpNums)
      },
      prestoAccountProfilePageSizeChange(size) {
        this.AccountList.pageSize2 = size
        this.AccountList.currentPage2 = 1;
        this.prestoAccountProfileHandleData()
      },
      prestoAccountProfileCurrentChange(size) {
        this.AccountList.currentPage2 = size// 设置当前页是第几页
        this.prestoAccountProfileHandleData()
      },
      prestoAccountProfileHandleData() {
        this.gridOptions.api.setRowData(this.AccountList.ListTableData.slice((this.AccountList.currentPage2 - 1) * this.AccountList.pageSize2, this.AccountList.currentPage2 * this.AccountList.pageSize2))
      },
      machinePageSizeChange(size) {
        this.TransactionDocument.pageSize3 = size
        this.TransactionDocument.currentPage3 = 1;
        if (this.machineFlg === 0) {
          this.loadMachineBu(this.machineBu)
        } else if (this.machineFlg === 1) {
          this.loadMachinePro(this.machineProducts)
        }
      },
      machineCurrentChange(page) {
        this.TransactionDocument.currentPage3 = page
        if (this.machineFlg === 0) {
          this.loadMachineBu(this.machineBu)
        } else if (this.machineFlg === 1) {
          this.loadMachinePro(this.machineProducts)
        }
      },
      prestoMachinePageSizeChange(size) {
        this.TransactionDocument.pageSize3 = size
        this.TransactionDocument.currentPage3 = 1;
        this.prestoMachineHandleData()
      },
      prestoMachineCurrentChange(size) {
        this.TransactionDocument.currentPage3 = size// 设置当前页是第几页
        this.prestoMachineHandleData()
      },
      prestoMachineHandleData() {
        this.machineOptions.api.setRowData(this.TransactionDocument.transactionTableData.slice((this.TransactionDocument.currentPage3 - 1) * this.TransactionDocument.pageSize3, this.TransactionDocument.currentPage3 * this.TransactionDocument.pageSize3))
      },

      claimPageSizeChange(size) {
        this.Service.pageSize5 = size
        this.Service.currentPage5 = 1;
        this.drillInItServiceList(this.claimAreas, this.claimBpNums, this.claimBus, this.claimProducts)
      },
      claimCurrentChange(page) {
        this.Service.currentPage5 = page
        this.drillInItServiceList(this.claimAreas, this.claimBpNums, this.claimBus, this.claimProducts)
        // this.loadService()
      },
      prestoClaimPageSizeChange(size) {
        this.Service.pageSize5 = size
        this.Service.currentPage5 = 1;
        this.prestoClaimHandleData()
      },
      prestoClaimCurrentChange(size) {
        this.Service.currentPage5 = size// 设置当前页是第几页
        this.prestoClaimHandleData()
      },
      prestoClaimHandleData() {
        this.claimOptions.api.setRowData(this.Service.serviceTableData.slice((this.Service.currentPage5 - 1) * this.Service.pageSize5, this.Service.currentPage5 * this.Service.pageSize5))
      },
      // BP情况下下拉框禁用接口
      dropSelectBan() {
        const _this = this
        this.axios.post('/search/dropSelectForSearchBp.do', {
          bp_num: this.searchTag.bpNumber
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data
            this.geoValue = [resData.data.customer_geo]
            this.regionValue = [resData.data.customer_region]
            this.countryValue = [resData.data.customer_country_code]
            this.Ban = true
          }
        }).catch(error => {
          console.log(error)
        })
      },
      tabScroll(num) {
        var domNode = document.getElementsByClassName('el-table__body-wrapper')[num]
        var _this = this
        domNode.addEventListener('scroll', function () {
          // if (domNode.scrollHeight - domNode.scrollTop - 1 <= domNode.clientHeight) {
          // if (domNode.scrollHeight - domNode.scrollTop - 0.5 <= domNode.clientHeight) {
          if (domNode.scrollHeight - domNode.scrollTop - 0.7 <= domNode.clientHeight) {
            _this.tabLoading = true

            if (_this.result_flag === 'account') {
              if (num === 0) {
                // console.log('Account的数据')
                _this.AccountList.currentPage2 += 1
                // alert(_this.accountAreas)
                _this.loadAccountList(_this.accountAreas, _this.accountBpNums)
              }
              // 1肯定存在，因为个人信息表的时show，存在的。所以要跳过他
              if (num === 2) {
                // console.log('Machine的数据')
                _this.TransactionDocument.currentPage3 += 1
                // _this.loadMachine()
                // _this.loadMachine(_this.machineProducts)

                if (_this.machineFlg === 0) {
                  _this.loadMachineBu(_this.machineBu)
                } else if (_this.machineFlg === 1) {
                  _this.loadMachinePro(_this.machineProducts)
                }
                // if (_this.returnIcon === false) {
                //   _this.loadMachineBu(_this.machineBu)
                // } else if (_this.returnIcon === true) {
                //   _this.loadMachinePro(_this.machineProducts)
                // }
              }
              if (num === 3) {
                // console.log('Service的数据')
                _this.Service.currentPage5 += 1
                _this.loadService(_this.claimAreas, _this.claimBpNums, _this.claimBus, _this.claimProducts)
              }
            }
            if (_this.result_flag === 'bp') {
              if (num === 0) {
                // console.log('Account Profile的数据')
                _this.personListTab.currentPage1 += 1
                _this.loadPersonList()
              }
              if (num === 1) {
                // console.log('Machine的数据')
                _this.TransactionDocument.currentPage3 += 1
                // _this.loadMachine()
                if (_this.returnIcon === false) {
                  _this.loadMachineBu(_this.machineBu)
                } else if (_this.returnIcon === true) {
                  _this.loadMachinePro(_this.machineProducts)
                }
              }
              if (num === 2) {
                // console.log('Service的数据')
                _this.Service.currentPage5 += 1
                _this.loadService()
              }
            }
          }
        })
//        domNode.onscroll = function() {
//          console.log('可以')
//        }
      },
      // 千分位处理
      comdify(n) {
        var re = /\d{1,3}(?=(\d{3})+$)/g;
        var n1 = n.replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) {
          return s1.replace(re, "$&,") + s2
        })
        return n1
      },
      // 格式化列
      formatters(row, column, cellValue) {
        // console.log(row)
        // console.log(column)
        // console.log(cellValue)
        // console.log(this.comdify(`${cellValue}`))
        return this.comdify(`${cellValue}`)
        // return row.address
      },
      // 加载 Echarts

      // Account
      loadAccountPieEcharts() { // 请求饼状图数据
        this.accountPieLoading = true
        const _this = this
        this.axios.post('/search/geoPieForAccountTab.do', {
          username: getUsername(),
          tablename: 'account', // 固定
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data
            const pieEcharts = _this.echarts.init(document.getElementById('pieEcharts'), null, {renderer: 'canvas'})
            pieEcharts.hideLoading()
            // 因为account模块和machine模块都有rev gp sell in ，所以要加下面代码清空一下
            _this.accountPieData1 = []
            _this.accountPieData2 = []
            _this.accountPieData3 = []
            _this.accountPieDatas = []
            // 返回data有数据的情况
            if (Object.keys(resData.data).length !== 0) {
              // _this.echartsxDatas = resData.category
              _this.accountPieData1 = resData.data.revenue
              _this.accountPieData2 = resData.data.gp
              _this.accountPieData3 = resData.data.machine
              _this.accountPieDatas = resData.data.revenue
              _this.showAccountPieEcharts()
            } else {
              this.accountPieLoading = false
              pieEcharts.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              })
              // console.log('Account 的pie对象data为空')
            }
          }
        })
      },
      drillAccountPieEcharts(bpNums = [], areas = [], isclick = '', needColor = []) {
        this.accountPieLoading = true
        var value1 = bpNums
        var value2 = areas
        const _this = this
        this.axios.post('/search/geoPieForAccountTab.do', {
          username: getUsername(),
          tablename: 'account', // 固定
          bp_nums: value1,
          areas: value2,
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data
            const pieEcharts = _this.echarts.init(document.getElementById('pieEcharts'), null, {renderer: 'canvas'})
            // pieEcharts.hideLoading()
            this.accountPieLoading = false
            // 因为account模块和machine模块都有rev gp sell in ，所以要加下面代码清空一下
            _this.accountPieData1 = []
            _this.accountPieData2 = []
            _this.accountPieData3 = []
            _this.accountPieDatas = []
            // 返回data有数据的情况
            if (Object.keys(resData.data).length !== 0) {
              // _this.echartsxDatas = resData.category
              _this.accountPieData1 = resData.data.revenue
              _this.accountPieData2 = resData.data.gp
              _this.accountPieData3 = resData.data.machine
              _this.accountPieDatas = resData.data.revenue
              _this.showAccountPieEcharts(isclick, needColor)
            } else {
              this.accountPieLoading = false
              pieEcharts.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              })
              // console.log('Account 的pie对象data为空')
            }
          }
        })
      },
      showAccountPieEcharts(isclick = '', needColor = []) {
        this.selectRadio1(this.radio1) // 用于rev gp sellin下不同选择展示相应数据;没有的话都会展示成rev的
        const _this = this
        const pieEcharts = this.echarts.init(document.getElementById('pieEcharts'), null, {renderer: 'canvas'})
        pieEcharts.clear()
        // pieEcharts.hideLoading()
        if (_this.accountPieDatas === undefined) {
          this.accountPieLoading = false
          pieEcharts.showLoading('default', {
            text: 'No Data',
            color: '#fff',
            textColor: '#959595',
            maskColor: 'rgb(255, 255, 255)',
            zlevel: 0
          })
        } else {
          var paramsData = sortObj(_this.accountPieDatas)
          // 图例数据
          var legendData = []
          for (let i in paramsData) {
            legendData.push({
              name: i,
              icon: 'circle'
            })
          }
          // 饼图数据
          var pieData = []
          var k = 0
          let colorStop = []
          for (let i in paramsData) {
            if (isclick === 'pie') {
              colorStop = [
                {offset: 0, color: needColor[0].color},
                {offset: 1, color: needColor[1].color}
              ]
            } else {
              colorStop = [
                {offset: 0, color: this.optionColors[k]},
                {offset: 1, color: this.optionColors[k]}
              ]
            }
            pieData.push({
              value: paramsData[i],
              name: i,
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    // colorStops: [
                    //   {offset: 0, color: colorArr[k]},
                    //   {offset: 1, color: colorArr[k + 1]}
                    // ],
                    colorStops: colorStop,
                    globalCoord: false // 缺省为 false
                  },
                  barBorderRadius: [0, 50, 50, 0] //（顺时针左上，右上，右下，左下）
                },
                // emphasis: {
                //   shadowBlur: 10,
                //   shadowOffsetX: 0,
                //   shadowColor: 'rgba(0, 0, 0, 0.5)'
                // }
              }
            })
            k++
            if (k > _this.optionColors.length - 1) {
              k = 1
            }
          }
          var option = {
            color: this.optionColors,
            tooltip: {
              formatter: function (params) {
                let item = ''
                item += params.name + ': ' + '($K)' + comdify((params.value).toString())
                return item
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)',
              confine: true
//                  trigger: 'item',
//                  formatter: "{a} <br/>{b} : {c} ({d}%)"
//                  formatter: "{b} : {c} ({d}%)"
            },
            legend: {
              type: 'scroll',
              orient: 'horizontal',
              bottom: 'bottom',
              itemWidth: 10,
              itemGap: 20,
              textStyle: {
                color: '#14142d',
                // fontSize: 9,
                fontFamily: 'Helvetica'
              },
              data: legendData
//                  data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            series: [
              {
//                    name: '数据源',
                type: 'pie',
                minAngle: 10,
//                    radius: '55%',
                radius: ['35%', '65%'],
                center: ['50%', '40%'],
                // radius: ['35%', '65%'],
                // center: ['50%', '50%'],
                selectedMode: 'single',
                label: {
                  normal: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: '14',
                      fontWeight: 'bold'
                    }
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                avoidLabelOverlap: false,
                // itemStyle: {
                //   normal: {
                //     shadowColor: 'rgba(125, 68, 245, 0.56)',
                //     shadowBlur: 10,
                //     shadowOffsetX: 0,
                //     shadowOffsetY: 10,
                //   },
                //   emphasis: {
                //     shadowColor: 'rgba(125, 68, 245, 0.56)',
                //     shadowBlur: 10,
                //     shadowOffsetX: 0,
                //     shadowOffsetY: 10,
                //   }
                // },
                // selectedMode: 'multiple',
                data: pieData
//                    itemStyle: {
//                      normal: {
//                        color: {
//                          type: 'linear',
//                          x: 0,
//                          y: 0,
//                          x2: 0,
//                          y2: 1,
//                          colorStops: [
//                            {offset: 0, color: '#090'},
//                            {offset: 0.5, color: '#ff0'},
//                            {offset: 1, color: '#f00'}
//                          ],
//                          globalCoord: false // 缺省为 false
//                        },
////                  barBorderRadius: 50
//                        barBorderRadius: [0, 50, 50, 0] //（顺时针左上，右上，右下，左下）
//                      },
//                      emphasis: {
//                        shadowBlur: 10,
//                        shadowOffsetX: 0,
//                        shadowColor: 'rgba(0, 0, 0, 0.5)'
//                      }
//                    }
              }
            ]
          }
          pieEcharts.hideLoading()
          pieEcharts.clear()
          pieEcharts.setOption(option)
          this.accountPieLoading = false
          // 绑定事件采用写在mounted；只绑定一次，防止重复注册；2或者采用echarts自带off()解绑的方法，就是下面的。
          // console.log('为什么')
          // pieEcharts.off('click')
          // pieEcharts.on('click', function(params) {
          // // pieEcharts.off('click')
          //   console.log('选中的')
          //   console.log(params)
          //   _this.accountAreas = [params.name]
          //   console.log(_this.accountAreas)
          //   // 柱状图
          //   _this.drillAccountBarEcharts(_this.accountAreas)
          //   // 折线图
          //   _this.drillEchart(_this.accountAreas) // 传参数为数组
          //   // 表格
          //   _this.drillInItAccountList(_this.accountAreas)
          // })
        }
      },
      loadAccountBarEcharts() {
        this.accountBarLoading = true
        const _this = this
        this.axios.post('/search/bpBarForAccountTab.do', {
          username: getUsername(),
          tablename: 'account',
          areas: [],
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data
            const barEcharts = _this.echarts.init(document.getElementById('barEcharts'), null, {renderer: 'canvas'})
            barEcharts.clear()
            barEcharts.hideLoading()
            _this.accountBarData1 = []
            _this.accountBarData2 = []
            _this.accountBarData3 = []
            _this.accountBarDatas = []
            if (Object.keys(resData.data).length !== 0) {
              _this.accountBarData1 = resData.data.revenue
              _this.accountBarData2 = resData.data.gp
              _this.accountBarData3 = resData.data.machine
              _this.accountBarDatas = resData.data.revenue
              _this.showAccountBarEcharts()
            } else {
              this.accountBarLoading = false;
              barEcharts.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              })
              // console.log('bar对象data为空')
            }
          }
        })
      },
      drillAccountBarEcharts(value) {
        this.accountBarLoading = true
        const _this = this
        this.axios.post('/search/bpBarForAccountTab.do', {
          username: getUsername(),
          tablename: 'account',
          areas: value,
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data
            const barEcharts = _this.echarts.init(document.getElementById('barEcharts'), null, {renderer: 'canvas'})
            barEcharts.clear()
            barEcharts.hideLoading()
            _this.accountBarData1 = []
            _this.accountBarData2 = []
            _this.accountBarData3 = []
            _this.accountBarDatas = []
            if (Object.keys(resData.data).length !== 0) {
              _this.accountBarData1 = resData.data.revenue
              _this.accountBarData2 = resData.data.gp
              _this.accountBarData3 = resData.data.machine
              _this.accountBarDatas = resData.data.revenue
              _this.showAccountBarEcharts()
            } else {
              this.accountBarLoading = false
              barEcharts.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              })
              // console.log('bar对象data为空')
            }
          }
        })
      },
      //柱状图绘图函数
      showAccountBarEcharts() {
        const barEcharts = this.echarts.init(document.getElementById('barEcharts'), null, {renderer: 'canvas'})
        barEcharts.clear()
        this.selectRadio1(this.radio1) // 用于rev gp sellin下不同选择展示相应数据;没有的话都会展示成rev的
        const _this = this
        let accountBarEcharts = document.getElementById('barEcharts')
        if (this.accountBarDatas === undefined) {
          this.accountBarLoading = false
          accountBarEcharts.style.height = 30 + 'vh'
          accountBarEcharts.style.overflow = 'hidden'
          barEcharts.showLoading('default', {
            text: 'No Data',
            color: '#fff',
            textColor: '#959595',
            maskColor: 'rgb(255, 255, 255)',
            zlevel: 0
          })
          setTimeout(() => {
            barEcharts.resize()
          }, 200)
        } else {
          var paramsData = this.accountBarDatas

          // y轴数据
          let yDataWithId = []
          for (let i in paramsData.name) {
            yDataWithId.push(`${paramsData.name[i]}(${paramsData.number[i]})`)
          }
          var yData = yDataWithId
          //              var yData = [1, 2, 3, 4, 5]
          //X轴数据
          var xData = paramsData.value
          //bp_num数据
          var bpNumData = paramsData.number
          let xAxis = this.radio1 === '3' ? {
            type: 'value',
            name: 'Quantity',
            axisLabel: {
              interval: 0,
              rotate: 40,
              color: '#959eaf',
              // fontFamily: 'Helvetica'
            },
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            }
          } : {
            type: 'value',
            name: '$(k)',
            axisLabel: {
              interval: 0,
              rotate: 40,
              color: '#959eaf',
              fontFamily: 'Helvetica'
            },
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            },
          }
          var option = {
            title: {
              text: _this.title2,
              x: 'center'
            },
            color: ['#3398DB'],
            // tooltip: {},
            // tooltip: {
            //   trigger: 'axis',
            //   axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            //     type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            //   }
            // },
            tooltip: {
              // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              //   type: 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
              //   axis: 'x'
              // },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)',
              formatter: function (params) {
                // console.log(params)
                if (_this.radio1 === '3') {
                  // return 'Name: ' + params.name + '<br />' + 'ID: ' + bpNumData[params.dataIndex] + '<br />' + 'Quantity: ' + _this.comdify(`${params.value}`)
                  return 'Quantity: ' + _this.comdify(`${params.value}`)
                } else {
                  // return 'Name: ' + params.name + '<br />' + 'ID: ' + bpNumData[params.dataIndex] + '<br />' + '$(K): ' + _this.comdify(`${params.value}`)
                  return '$(K): ' + _this.comdify(`${params.value}`)
                }
                // return 'Name: ' + params.name + '<br />' + 'BP ID: ' + bpNumData[params.dataIndex] + '<br />' + '$(K): ' +  _this.comdify(`${params.value}`)
              },
            },
            // 坐标轴指示器的全局公用设置；指示坐标轴当前刻度的工具
            // axisPointer: {
            //   show: true,
            //   type: 'shadow',
            //   // shadowStyle: {},
            //   label: {
            //     backgroundColor: '#777'
            //   }
            // },
            grid: {
              left: '7%',
              right: '9%',
              bottom: '3%',
              top: 0,
              containLabel: true
            },
            yAxis: [
              {
                type: 'category',
                axisLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLabel: {
                  interval: 0,
                  // show: false,
                  color: '#959eaf',
                  // fontFamily: 'Helvetica',
                  fontSize: 12
                },
                data: yData,
//                    data: ['One', 'Two', 'Three', 'Four', 'Five'],
                inverse: true, // 是否是反向坐标轴
                axisTick: {
                  alignWithLabel: true
                },
                // 坐标轴指示器的设置；指示坐标轴当前刻度的工具
                // axisPointer: {
                //   show: true,
                //   type: 'shadow',
                //   // shadowStyle: {},
                //   label: {
                //     backgroundColor: '#777'
                //   }
                // }
              }
            ],
            xAxis: [
              xAxis
            ],
            series: [
              {
//                    name: '数量',
//               哈哈
                type: 'bar',
                barWidth: '50%',
                barMaxWidth: 50,
                barMinHeight: 10,
                data: xData,
//                    data: [10, 52, 200, 334, 390],
                itemStyle: {
                  normal: {
                    color: '#786bcb'
                    // color: new this.echarts.graphic.LinearGradient(
                    //   0, 0, 1, 0,
//                    [
//                      {offset: 0, color: '#83bff6'},
//                      {offset: 0.5, color: '#188df0'},
//                      {offset: 1, color: '#188df0'}
//                    ]
//                     [
//                      {offset: 0, color: '#f00'},
//                      {offset: 0.5, color: '#ff0'},
//                      {offset: 1, color: '#090'}
//                       {offset: 0, color: '#786bcb'},
//                       {offset: 1, color: '#9c94cf'}
//                     ]
                    // ),
//                  barBorderRadius: 50
                    // barBorderRadius: [0, 50, 50, 0], //（顺时针左上，右上，右下，左下）
                    // shadowColor: 'rgba(0, 0, 0, 0.5)',
                    // shadowBlur: 10,
                    // shadowOffsetX: 10,
                    // shadowOffsetY: 10
                  }
                  // emphasis: {
                  // borderColor: '#f00',
                  // borderWidth: 10,
                  // shadowColor: 'rgba(0, 0, 0, 0.5)',
                  // shadowBlur: 10,
                  // shadowOffsetX: 5,
                  // shadowOffsetY: 10
                },
//                 emphasis: {
//                   color: new this.echarts.graphic.LinearGradient(
//                     0, 0, 1, 0,
// //                    [
// //                      {offset: 0, color: '#83bff6'},
// //                      {offset: 0.5, color: '#188df0'},
// //                      {offset: 1, color: '#188df0'}
// //                    ]
//                     [
// //                      {offset: 0, color: '#f00'},
// //                      {offset: 0.5, color: '#ff0'},
// //                      {offset: 1, color: '#090'}
//                       {offset: 0, color: '#0dece1'},
//                       {offset: 1, color: '#cb86fe'}
//                     ]
//                   ),
// //                  barBorderRadius: 50
//                   barBorderRadius: [0, 50, 50, 0] //（顺时针左上，右上，右下，左下）
//                 }
//               },
//               barMinHeight: 20,
              }
            ]
          }
          barEcharts.hideLoading()
          barEcharts.setOption(option)
          this.accountBarLoading = false
          // let accountBarEcharts = document.getElementById('barEcharts')
          let barHeight = 20
          let bars = yData.length
          // accountBarEcharts.style.overflow = 'auto'
          if (bars > 10) {
            accountBarEcharts.style.height = (bars * barHeight) + 'px'
          } else {
            accountBarEcharts.style.height = 200 + 'px'
          }

          barEcharts.resize()
          barEcharts.off()
          barEcharts.on('click', function (params) {
            var drillId = bpNumData
            _this.accountBpNums = [drillId[params.dataIndex]]
            _this.accountAreas = []
            // 饼图
            _this.drillAccountPieEcharts(_this.accountBpNums)
            // 折线图
            _this.drillEchart([], _this.accountBpNums)
            // 表格
            _this.drillInItAccountList([], _this.accountBpNums)
          })
        }
      },
      jumpEchart(n) {
        this.accountLineLoading = true
        const _this = this
        this.axios.post('/search/fisYearLineForAccountTab.do', {
          username: getUsername(),
          tablename: 'account',
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(response => {
          if (response.status === 200) {
            const myEchart = _this.echarts.init(document.getElementById('echart'), null, {renderer: 'canvas'})
            myEchart.clear()
            myEchart.hideLoading()
            _this.echartsData1 = []
            _this.echartsData2 = []
            _this.echartsData3 = []
            _this.echartsDatas = []
            var resData = response.data.data
            // 返回data有数据的情况
            if (Object.keys(resData).length !== 0) {
              console.log(resData, '看看')
              _this.echartsxDatas = resData.category
              _this.echartsData1 = resData.data.sdrev
              _this.echartsData2 = resData.data.gross_profit
              _this.echartsData3 = resData.data.sell_in_qty
              _this.echartsDatas = resData.data.sdrev
              _this.showEcharts()
            } else {
              this.accountLineLoading = false
              myEchart.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              })
            }
          }
        })
      },
      drillEchart(value1, value2) {
        this.accountLineLoading = true
        // 取默认值
        var value1 = value1 || [] // 默认为空数组
        var value2 = value2 || [] // 默认为空数组
        // console.log(value1)
        // console.log(value2)
        const _this = this
        this.axios.post('/search/fisYearLineForAccountTab.do', {
          username: getUsername(),
          tablename: 'account',
          areas: value1,
          bp_nums: value2,
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(response => {
          if (response.status === 200) {
            const myEchart = _this.echarts.init(document.getElementById('echart'), null, {renderer: 'canvas'})
            myEchart.clear()
            myEchart.hideLoading()
            _this.echartsData1 = []
            _this.echartsData2 = []
            _this.echartsData3 = []
            _this.echartsDatas = []
            var resData = response.data.data
            // 返回data有数据的情况
            if (Object.keys(resData).length !== 0) {
              _this.echartsxDatas = resData.category
              _this.echartsData1 = resData.data.sdrev
              _this.echartsData2 = resData.data.gross_profit
              _this.echartsData3 = resData.data.sell_in_qty
              _this.echartsDatas = resData.data.sdrev
              _this.showEcharts()
            } else {
              this.accountLineLoading = false
              myEchart.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              })
            }
          }
        })
      },
      showEcharts() {
        var _this = this
        let myChart = this.echarts.init(document.getElementById('echart'), null, {renderer: 'canvas'})
        this.selectRadio1(this.radio1) // 用于rev gp sellin下不同选择展示相应数据;没有的话都会展示成rev的
        console.log(this.echartsDatas)
        if (this.echartsDatas === undefined) {
          myChart.clear()
          this.accountLineLoading = false
          myChart.showLoading('default', {
            text: 'No Data',
            color: '#fff',
            textColor: '#959595',
            maskColor: 'rgb(255, 255, 255)',
            zlevel: 0
          })
        } else {
          let leg = this.echartsDatas.map(function (item) {
            return item.year
          })
          let leg2 = this.echartsDatas.map(function (item) {
            return item.data
          })
          let str = this.echartsDatas.map(function (item) {
            return item.data.reduce(function (init, value, index) {
              return init + value;
            })
          })
          let data = []
          // 判断 Sell in
          let yAxis = this.radio1 === '3' ? {
            type: 'value',
            name: 'Quantity',
            axisTick: {
              show: false
            },
            axisLabel: {
              // interval: 0,
              // rotate: 40,
              color: '#959eaf',
              fontFamily: 'Helvetica',
              fontSize: 13
            },
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            },
            splitLine: {
              lineStyle: {
                color: ['#f5f5f9']
              }
            }
          } : {
            type: 'value',
            name: '$(k)',
            axisTick: {
              show: false
            },
            axisLabel: {
              // interval: 0,
              // rotate: 40,
              color: '#959eaf',
              fontFamily: 'Helvetica',
              fontSize: 13
            },
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            },
            splitLine: {
              lineStyle: {
                color: ['#f5f5f9']
              }
            }
          }
          if (this.radio1 === '3') {
            for (let i = 0; i < leg.length; i++) {
//          data.push(leg[i]+'(Total:'+str[i].toFixed(2)+'$(k))');
              data.push(leg[i] + '(Total:' + this.comdify(String(str[i])) + ' quantity)')
            }
          } else {
            for (let i = 0; i < leg.length; i++) {
//          data.push(leg[i]+'(Total:'+str[i].toFixed(2)+'$(k))');
              str[i] = str[i].toFixed(2)
//            console.log(str)
              str[i] = this.comdify(str[i])
              data.push(leg[i] + '(Total:' + str[i] + '$(k))')
//            data.push(leg[i] + '(Total:' + str[i].toFixed(2) + '$(k))')
            }
          }
          var k = 0
          let data2 = []
          for (let i = 0; i < data.length; i++) {
            data2.push({
              name: data[i],
              type: 'line',
              // smooth: true,
              // symbolSize: 10,
              showAllSymbol: true,
              stack: i,
              data: leg2[i],
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {offset: 0, color: this.optionColors[k]},
                      {offset: 1, color: this.optionColors[k]}
                    ],
                    globalCoord: false // 缺省为 false
                  },
                  // barBorderRadius: [0, 50, 50, 0] //（顺时针左上，右上，右下，左下）
                },
                // emphasis: {
                //   shadowBlur: 10,
                //   shadowOffsetX: 0,
                //   shadowColor: 'rgba(0, 0, 0, 0.5)'
                // }
              },
              smooth: true,
              lineStyle: {
                normal: {
                  width: 2,
                  // shadowColor: 'rgba(116, 35, 244, 0.5)',
                  // shadowBlur: 12,
                  // shadowOffsetX: 0,
                  // shadowOffsetY: 5,
                },
              }
            });
            k++
            if (k > _this.optionColors.length) {
              k = 0
            }
          }

          let xAxis = this.radio1 === '3' ? {
            type: 'category',
            boundaryGap: false,
            data: this.echartsxDatas,
            name: 'Month',
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#959eaf',
              fontFamily: 'Helvetica',
              fontSize: 13
            },
          } : {
            type: 'category',
            boundaryGap: false,
            data: this.echartsxDatas,
            name: 'Month',
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#959eaf',
              // fontFamily: 'Helvetica',
              fontSize: 13
            },
          }
          // 指定图表的配置项和数据
          var option = {
            // color: ['#ff4906', '#58afec', '#ff0582', '#39ce39', '#7f21e0', '#ffee8b'],
            tooltip: {
              trigger: 'axis',
              textStyle: {
                align: 'left',
                color: '#7588E4'
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)',
              confine: true,
              formatter: function (params) {
                // console.log(params)
                var mounth = params[0].name // 月份
                // 年份数组
                var years = params.map(item => {
                  var seriesName = item.seriesName.substr(0, 6)
                  return seriesName
                })
                // 值
                var datas = params.map(item => item.data)
                var item = ''
                for (let i = 0; i < years.length; i++) {
                  item = item + years[i] + ': ' + _this.comdify(String(datas[i])) + '<br />'
                }
                // var mounths = _this.echartsxDatas(item => {
                //   return
                // })
                return mounth + '<br />' + item
              }
            },
            legend: {
              data: data,
              right: 'right',
              top: 20,
              itemGap: 18,
//            formatter: function (name) {
//              return str.map(function(item) {
//                return name + item
//              })
//            },
              // leftchartJson[key][i].year.toString()+'(总量：'+eval(leftchartJson[key][i].data.join("+")).toFixed(2)+'$(k))';
//                data: ['邮件营销(总量：1$(k))', '联盟广告(总量：1$(k))', '视频广告(总量：1$(k))', '直接访问(总量：1$(k))', '搜索引擎(总量：1$(k))'],
//             bottom: 'bottom'
              // orient: 'horizontal',
              // bottom: 'bottom',
              // itemwidth: 30
            },
            grid: {
              left: '1%',
              right: '25%',
              bottom: '9%',
              top: 40,
              containLabel: true
            },
            xAxis: xAxis,
            yAxis: yAxis,
//          yAxis: {
//            type: 'value',
//            name: '$(k)',
//            axisTick: {
//              show: false
//            }
//          },
            series: data2
          }
          // 使用刚指定的配置项和数据显示图表。
          myChart.clear()
          myChart.hideLoading()
          myChart.setOption(option)
          this.accountLineLoading = false
        }
      },

      // Machine
      loadMachineBarEcharts() {
        this.machineBarLoading = true
        // this.returnIcon = false
        const _this = this
        this.axios.post('/search/buBarForMachineTab.do', {
          username: getUsername(),
          tablename: 'machine', // 固定
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(res => {
          if (res.status === 200) {
            const barEcharts = this.echarts.init(document.getElementById('barTransaction'), null, {renderer: 'canvas'})
            barEcharts.clear()
            barEcharts.hideLoading()
            // 因为account模块和machine模块都有rev gp sell in ，所以要加下面代码清空一下
            _this.machineBarData1 = []
            _this.machineBarData2 = []
            _this.machineBarData3 = []
            _this.machineBarDatas = []
            var resData = res.data
            if (Object.keys(resData.data).length !== 0) {
              _this.machineBarData1 = resData.data.sdrev
              _this.machineBarData2 = resData.data.gross_profit
              _this.machineBarData3 = resData.data.sell_in_qty
              _this.machineBarDatas = resData.data.sdrev
              _this.showMachineBarEcharts()
            } else {
              this.machineBarLoading = false
              barEcharts.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              })
            }
          }
        })
      },
      // 点击返回按钮，清空图表和维保卡
      returnBefore(){
        this.snDetailProValue = [] // 传参置空
        this.showMachineBarEcharts()
        this.loadWarrantyDataBu([])
      },
      showMachineBarEcharts() {
        // this.$refs.ProductPreference.loadCharts()
        // this.$refs.Survey.loadEchartsData()
        this.selectRadio2(this.radio2) // 用于rev gp sellin下不同选择展示相应数据;没有的话都会展示成rev的
        this.returnIcon = false
        const _this = this
        // _this.loadWarrantyDataBu([])
        _this.busValue = []
        _this.productsValue = []
        const barEcharts = this.echarts.init(document.getElementById('barTransaction'), null, {renderer: 'canvas'})
        var machineBarEcharts = document.getElementById('barTransaction')
        barEcharts.clear()
        barEcharts.hideLoading()
        var paramsData = this.machineBarDatas
        // if (paramsData.length !== 0) {
        if (paramsData && paramsData.length !== 0) {
          // y轴数据
          var yData = paramsData.name
          //X轴数据
          var xData = paramsData.value
          let yAxis = this.radio2 === '3' ? {
            type: 'value',
            name: 'Quantity',
            axisLabel: {
              interval: 0,
              // rotate: 40,
              color: '#959eaf',
              // fontFamily: 'Helvetica'
            },
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            }
          } : {
            type: 'value',
            name: '$(k)',
            axisLabel: {
              interval: 0,
              // rotate: 40,
              color: '#959eaf',
              // fontFamily: 'Helvetica'
            },
            axisLine: {
              lineStyle: {
                color: '#959eaf'
              }
            }
          }

          var option = {
            color: ['#3398DB'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              },
              textStyle: {
                align: 'left',
                color: '#7588E4'
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            grid: {
              left: '3%',
              right: '3%',
//                  bottom: -50,
              bottom: 0,
              top: 30,
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: yData,
//                    data: ['One', 'Two', 'Three', 'Four', 'Five'],
                inverse: true, // 是否是反向坐标轴
                axisTick: {
                  alignWithLabel: true
                },
                axisLabel: {
                  interval: 0,
                  rotate: 40,
                  color: '#959eaf',
                  // fontFamily: 'Helvetica',
                  // textStyle: {
                  //   fontSize: 10 // 让字体变大
                  // }
                },
                axisLine: {
                  lineStyle: {
                    color: '#959eaf'
                  }
                }
              }
            ],
            yAxis: [yAxis],
            series: [
              {
//                    name: '数量',
                type: 'bar',
                barWidth: '50%',
                barMaxWidth: 50,
                barMinHeight: 10,
                data: xData,
//                    data: [10, 52, 200, 334, 390],
                itemStyle: {
                  normal: {
                    color: '#4faee8'
//                     color: new this.echarts.graphic.LinearGradient(
//                       0, 0, 0, 1,
//                       [
// //                      {offset: 0, color: '#f00'},
// //                      {offset: 0.5, color: '#ff0'},
// //                      {offset: 1, color: '#090'}
//                         {offset: 0, color: '#6ad8d2'},
//                         {offset: 1, color: '#4faee8'}
//                       ]
//                     ),
//                  barBorderRadius: 50
                    // barBorderRadius: [50, 50, 0, 0], //（顺时针左上，右上，右下，左下）
                    // 阴影效果
                    // shadowBlur: 10,
                    // shadowColor: 'rgba(0, 0, 0, 0.5)',
                    // shadowOffsetX: 10,
                    // shadowOffsetY: 10
                  }
                }
              }
            ]
          }
          barEcharts.setOption(option)
          this.machineBarLoading = false
          // var barHeight = 20
          // let bars = yData.length
          machineBarEcharts.style.height = '35vh'
          machineBarEcharts.style.overflow = 'hidden'
          setTimeout(() => {
            barEcharts.resize()
          }, 0)
          // barEcharts.on('click', function(params) {
          //   // console.log(params)
          //   _this.loadMachineChildBar(params.name)
          // })
        } else {
          // setTimeout(()=>{
          //   barEcharts.resize()
          // },0)
          machineBarEcharts.style.overflow = 'hidden'
          this.machineBarLoading = false
          barEcharts.showLoading('default', {
            text: 'No Data',
            color: '#fff',
            textColor: '#959595',
            maskColor: 'rgb(255, 255, 255)',
            zlevel: 0
          })
        }
      },
      loadMachineChildBar(value) {
        this.machineBarLoading = true
        const _this = this
        this.axios.post('/search/brandBarForMachineTab.do', {
          username: getUsername(),
          tablename: 'machine', // 固定
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: value, // 钻去传参
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data
            if (Object.keys(resData.data).length !== 0) {
              var paramsData = {}
              if (_this.radio2 === '1') {
                paramsData = resData.data.sdrev
              }
              if (_this.radio2 === '2') {
                paramsData = resData.data.gross_profit
              }
              if (_this.radio2 === '3') {
                paramsData = resData.data.sell_in_qty
              }
              // y轴数据
              var yData = paramsData.name
              //X轴数据
              var xData = paramsData.value

              let xAxis = this.radio2 === '3' ? {
                type: 'value',
                name: 'Quantity',
                axisLabel: {
                  interval: 0,
                  rotate: 40,
                  color: '#959eaf',
                  fontFamily: 'Helvetica'
                },
                axisLine: {
                  lineStyle: {
                    color: '#959eaf'
                  }
                }
              } : {
                type: 'value',
                name: '$(k)',
                axisLabel: {
                  interval: 0,
                  rotate: 40,
                  color: '#959eaf',
                  fontFamily: 'Helvetica'
                },
                axisLine: {
                  lineStyle: {
                    color: '#959eaf'
                  }
                }
              }
              const barEcharts = this.echarts.init(document.getElementById('barTransaction'), null, {renderer: 'canvas'})
              var option = {
                color: ['#3398DB'],
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  },
                  textStyle: {
                    align: 'left',
                    color: '#7588E4'
                  },
                  backgroundColor: 'rgba(255,255,255,1)',
                  padding: [5, 10],
                  extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
                },
                grid: {
                  left: '3%',
                  right: 100,
                  bottom: '5%',
                  containLabel: true
                },
                yAxis: [
                  {
                    type: 'category',
                    data: yData,
                    inverse: true, // 是否是反向坐标轴
                    axisTick: {
                      alignWithLabel: true
                    },
                    axisLabel: {
                      interval: 0,
                      // rotate: 40,
                      color: '#959eaf',
                      fontFamily: 'Helvetica'
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#959eaf'
                      }
                    }
                  }
                ],
                xAxis: [xAxis],
                series: [
                  {
//                    name: '数量',
                    type: 'bar',
                    barMaxWidth: 20,
                    data: xData,
//                    data: [10, 52, 200, 334, 390],
                    itemStyle: {
                      normal: {
                        color: '#4faee8'
//                         color: new this.echarts.graphic.LinearGradient(
//                           0, 0, 1, 0,
//                           [
// //                      {offset: 0, color: '#f00'},
// //                      {offset: 0.5, color: '#ff0'},
// //                      {offset: 1, color: '#090'}
//                             {offset: 0, color: '#4faee8'},
//                             {offset: 1, color: '#6ad8d2'}
//                           ]
//                         ),
//                  barBorderRadius: 50
                        // barBorderRadius: [0, 50, 50, 0] //（顺时针左上，右上，右下，左下）
                      }
                    }
                  }
                ]
              }
              barEcharts.setOption(option)
              var machineBarEcharts = document.getElementById('barTransaction')
              var barHeight = 20
              let bars = yData.length
              if (bars > 10) {
                machineBarEcharts.style.height = (bars * barHeight) + 'px'
              } else {
                machineBarEcharts.style.height = 300 + 'px'
              }

              barEcharts.resize()
              this.machineBarLoading = false
              _this.returnIcon = true
            } else {
              // console.log('bar对象data为空')
            }
          }
        })
      },
      // 因为在柱状图钻去前后请求的同一接口传参不同；所以分bu和pro
      loadWarrantyDataBu(value) {
        const _this = this
        // var value = this.finalBuValue || value
        var value = value || this.finalBuValue
        this.snDetailBuValue = value
        this.axios.post('/search/warrantyCardForMachineTab.do', {
          username: getUsername(),
          tablename: 'machine', // 固定
          // products: value, products第一次不传
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: value,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(res => {
          const resData = res.data.data
          _this.warrantyData.neg1 = resData.expired_30
          _this.warrantyData.neg2 = resData.expired_60
          _this.warrantyData.neg3 = resData.expired_90
          _this.warrantyData.pos1 = resData.expire_in_30
          _this.warrantyData.pos2 = resData.expire_in_60
          _this.warrantyData.pos3 = resData.expire_in_90
        })
      },
      loadWarrantyDataPro(value) {
        const _this = this
        var value = value || []
        this.snDetailProValue = value
        this.axios.post('/search/warrantyCardForMachineTab.do', {
          username: getUsername(),
          tablename: 'machine', // 固定
          products: value,
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(res => {
          const resData = res.data.data
          _this.warrantyData.neg1 = resData.expired_30
          _this.warrantyData.neg2 = resData.expired_60
          _this.warrantyData.neg3 = resData.expired_90
          _this.warrantyData.pos1 = resData.expire_in_30
          _this.warrantyData.pos2 = resData.expire_in_60
          _this.warrantyData.pos3 = resData.expire_in_90
        })
      },

      // Claim

      loadCliamPieEcharts() {
        this.claimPieLoading = true
        const _this = this
        this.axios.post('/search/geoPieForClaimTab.do', {
          username: getUsername(),
          tablename: 'service', // 固定
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data
            const pieEcharts = _this.echarts.init(document.getElementById('ClaimPie'), null, {renderer: 'canvas'})
            pieEcharts.hideLoading()
            // 返回data有数据的情况
            if (Object.keys(resData.data).length !== 0) {
              var paramsData = resData.data.repair_so
              paramsData = sortObj(paramsData)
              // 图例数据
              var legendData = []
              for (let i in paramsData) {
                legendData.push({
                  name: i,
                  icon: 'circle'
                })
                // legendData.push(i)
              }
              // 饼图数据
              var pieData = []
              // 渐变颜色
              // var colorArr = ['#3d62f2', '#913af6', '#47a7f8', '#69e3f2', '#9f37c1', '#d73ffd', '#f08351', '#c24039', '#83eb78', '#2bd22f', '#ffc801', '#ffe403', '#ec5fa8', '#c2398d']
              var k = 0
              for (let i in paramsData) {
                pieData.push({
                  value: paramsData[i],
                  name: i,
                  itemStyle: {
                    normal: {
                      color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                          {offset: 0, color: this.optionColors[k]},
                          {offset: 1, color: this.optionColors[k]}
                        ],
                        globalCoord: false // 缺省为 false
                      },
                      barBorderRadius: [0, 50, 50, 0] //（顺时针左上，右上，右下，左下）
                    },
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                })
                k++
                if (k > _this.optionColors.length) {
                  k = 0
                }
              }
              var option = {
                color: this.optionColors,
                tooltip: {
                  backgroundColor: 'rgba(255,255,255,1)',
                  padding: [5, 10],
                  textStyle: {
                    color: '#7588E4'
                  },
                  extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)',
                  confine: true
//                  trigger: 'item',
//                  formatter: "{a} <br/>{b} : {c} ({d}%)"
//                  formatter: "{b} : {c} ({d}%)"
                },
                legend: {
                  type: 'scroll',
                  orient: 'horizontal',
                  bottom: 'bottom',
                  itemWidth: 10,
                  itemGap: 20,
                  textStyle: {
                    color: '#14142d',
                    // fontSize: 9,
                    fontFamily: 'Helvetica'
                  },
                  data: legendData
//                  data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [
                  {
//                    name: '数据源',
                    type: 'pie',
                    minAngle: 10,
//                    radius: '55%',
                    radius: ['35%', '65%'],
                    center: ['50%', '40%'],
                    selectedMode: 'single',
                    data: pieData,
                    label: {
                      normal: {
                        show: false,
                        position: 'center'
                      },
                      emphasis: {
                        show: true,
                        textStyle: {
                          fontSize: '14',
                          fontWeight: 'bold'
                        }
                      }
                    },
                    labelLine: {
                      normal: {
                        show: false
                      }
                    },
                    avoidLabelOverlap: false,
                    // itemStyle: {
                    //   normal: {
                    //     shadowColor: 'rgba(125, 68, 245, 0.56)',
                    //     shadowBlur: 10,
                    //     shadowOffsetX: 0,
                    //     shadowOffsetY: 10,
                    //   },
                    //   emphasis: {
                    //     shadowColor: 'rgba(125, 68, 245, 0.56)',
                    //     shadowBlur: 10,
                    //     shadowOffsetX: 0,
                    //     shadowOffsetY: 10,
                    //   }
                    // },
//                    itemStyle: {
//                      normal: {
//                        color: {
//                          type: 'linear',
//                          x: 0,
//                          y: 0,
//                          x2: 0,
//                          y2: 1,
//                          colorStops: [
//                            {offset: 0, color: '#090'},
//                            {offset: 0.5, color: '#ff0'},
//                            {offset: 1, color: '#f00'}
//                          ],
//                          globalCoord: false // 缺省为 false
//                        },
////                  barBorderRadius: 50
//                        barBorderRadius: [0, 50, 50, 0] //（顺时针左上，右上，右下，左下）
//                      },
//                      emphasis: {
//                        shadowBlur: 10,
//                        shadowOffsetX: 0,
//                        shadowColor: 'rgba(0, 0, 0, 0.5)'
//                      }
//                    }
                  }
                ]
              }
              pieEcharts.setOption(option)
              this.claimPieLoading = false
//              pieEcharts.on('click', function (params) {
//                console.log(params)
//              })
            } else {
              this.claimPieLoading = false
              pieEcharts.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              })
              // console.log('Service 的pie对象data为空')
            }
          }
        })
      },
      drillCliamPieEcharts(bpNums, bus, pros, areas, isclick = '', needColor = []) {
        this.claimPieLoading = true
        var value1 = bpNums || []
        var value2 = bus || this.finalBuValue
        var value3 = pros
        var value4 = areas || []
        const _this = this
        this.axios.post('/search/geoPieForClaimTab.do', {
          username: getUsername(),
          tablename: 'service', // 固定
          bp_nums: value1,
          products: value3,
          areas: value4,
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: value2,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data
            const pieEcharts = _this.echarts.init(document.getElementById('ClaimPie'), null, {renderer: 'canvas'})
            pieEcharts.hideLoading()
            // 返回data有数据的情况
            if (Object.keys(resData.data).length !== 0) {
              var paramsData = resData.data.repair_so
              paramsData = sortObj(paramsData)
              // 图例数据
              var legendData = []
              for (let i in paramsData) {
                legendData.push({
                  name: i,
                  icon: 'circle'
                })
              }
              // 饼图数据
              var pieData = []
              // 渐变颜色
              // var colorArr = ['#3d62f2', '#913af6', '#47a7f8', '#69e3f2', '#9f37c1', '#d73ffd', '#f08351', '#c24039', '#83eb78', '#2bd22f', '#ffc801', '#ffe403', '#ec5fa8', '#c2398d']
              var k = 0
              let colorStop = []
              for (let i in paramsData) {
                if (isclick === 'cliamPie') {
                  colorStop = [
                    {offset: 0, color: needColor[0].color},
                    {offset: 0, color: needColor[1].color}
                  ]
                } else {
                  colorStop = [
                    {offset: 0, color: this.optionColors[k]},
                    {offset: 1, color: this.optionColors[k]}
                  ]
                }
                pieData.push({
                  value: paramsData[i],
                  name: i,
                  itemStyle: {
                    normal: {
                      color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        // colorStops: [
                        //   { offset: 0, color: colorArr[k] },
                        //   { offset: 1, color: colorArr[k + 1] }
                        // ],
                        colorStops: colorStop,
                        globalCoord: false // 缺省为 false
                      },
                      barBorderRadius: [0, 50, 50, 0] //（顺时针左上，右上，右下，左下）
                    },
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                })
                k++
                if (k > _this.optionColors.length) {
                  k = 0
                }
              }
              var option = {
                tooltip: {
                  backgroundColor: 'rgba(255,255,255,1)',
                  padding: [5, 10],
                  textStyle: {
                    color: '#7588E4'
                  },
                  extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)',
                  confine: true
//                  trigger: 'item',
//                  formatter: "{a} <br/>{b} : {c} ({d}%)"
//                  formatter: "{b} : {c} ({d}%)"
                },
                legend: {
                  type: 'scroll',
                  orient: 'horizontal',
                  bottom: 'bottom',
                  itemWidth: 10,
                  itemGap: 20,
                  textStyle: {
                    color: '#14142d',
                    // fontSize: 9,
                    fontFamily: 'Helvetica'
                  },
                  data: legendData
//                  data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [
                  {
//                    name: '数据源',
                    type: 'pie',
                    minAngle: 10,
//                    radius: '55%',
                    radius: ['35%', '65%'],
                    center: ['50%', '40%'],
                    selectedMode: 'single',
                    data: pieData,
                    label: {
                      normal: {
                        show: false,
                        position: 'center'
                      },
                      emphasis: {
                        show: true,
                        textStyle: {
                          fontSize: '14',
                          fontWeight: 'bold'
                        }
                      }
                    },
                    labelLine: {
                      normal: {
                        show: false
                      }
                    },
                    avoidLabelOverlap: false,
                    itemStyle: {
                      normal: {
                        // shadowColor: 'rgba(125, 68, 245, 0.56)',
                        // shadowBlur: 10,
                        // shadowOffsetX: 0,
                        // shadowOffsetY: 10,
                      },
                      emphasis: {
                        shadowColor: 'rgba(125, 68, 245, 0.56)',
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowOffsetY: 10,
                      }
                    },
//                    itemStyle: {
//                      normal: {
//                        color: {
//                          type: 'linear',
//                          x: 0,
//                          y: 0,
//                          x2: 0,
//                          y2: 1,
//                          colorStops: [
//                            {offset: 0, color: '#090'},
//                            {offset: 0.5, color: '#ff0'},
//                            {offset: 1, color: '#f00'}
//                          ],
//                          globalCoord: false // 缺省为 false
//                        },
////                  barBorderRadius: 50
//                        barBorderRadius: [0, 50, 50, 0] //（顺时针左上，右上，右下，左下）
//                      },
//                      emphasis: {
//                        shadowBlur: 10,
//                        shadowOffsetX: 0,
//                        shadowColor: 'rgba(0, 0, 0, 0.5)'
//                      }
//                    }
                  }
                ]
              }
              pieEcharts.setOption(option)
              this.claimPieLoading = false
//              pieEcharts.on('click', function (params) {
//                console.log(params)
//              })
            } else {
              this.claimPieLoading = false
              pieEcharts.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              })
              // console.log('Service 的pie对象data为空')
            }
          }
        })
      },
      loadCliamBarEcharts() {
        this.claimBarLoading = true
        const _this = this
        this.axios.post('/search/bpBarForClaimTab.do', {
          username: getUsername(),
          tablename: 'service',
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(res => {
          if (res.status === 200) {
            const resData = res.data
            const barEcharts = _this.echarts.init(document.getElementById('ClaimBar'), null, {renderer: 'canvas'})
            const claimBarEcharts = document.getElementById('ClaimBar')
            barEcharts.clear()
            barEcharts.hideLoading()
            if (Object.keys(resData.data).length !== 0) {
              var paramsData = {}
//              _this.accountBarRevenue = resData.data.revenue
//              _this.accountBarMachines = resData.data.machine
              var paramsData = resData.data.repair_so
              // y轴数据
              let yDataWithId = []
              for (let i in paramsData.name) {
                yDataWithId.push(`${paramsData.name[i]}(${paramsData.number[i]})`)
              }
              var yData = yDataWithId
//              var yData = [1, 2, 3, 4, 5]
              //X轴数据
              var xData = paramsData.value
              //bp_num数据
              _this.claimBpIdParams = paramsData.number
              var bpNumData = _this.claimBpIdParams
              // var bpNumData = paramsData.number
              var option = {
                title: {
                  text: _this.title2,
                  x: 'center'
                },
                color: ['#3398DB'],
                tooltip: {
                  confine: true,
                  formatter: function (params) {
                    console.log(params)
                    return 'Name: ' + params.name + '<br />' + 'ID: ' + bpNumData[params.dataIndex] + '<br />' + 'Quantity: ' + _this.comdify(`${params.value}`)
                  },
                  backgroundColor: 'rgba(255,255,255,1)',
                  padding: [5, 10],
                  textStyle: {
                    color: '#7588E4'
                  },
                  confine: true,
                  extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
                },
                // 坐标轴指示器的全局公用设置；指示坐标轴当前刻度的工具
                // axisPointer: {
                //   show: true,
                //   type: 'shadow',
                //   shadowStyle: {},
                //   label: {
                //     backgroundColor: '#777'
                //   }
                // },
                grid: {
                  left: '7%',
                  right: 80,
                  bottom: '3%',
                  top: 0,
                  containLabel: true
                },
                yAxis: [
                  {
                    type: 'category',
                    axisLine: {
                      lineStyle: {
                        color: '#f5f5f9'
                      }
                    },
                    axisLabel: {
                      interval: 0,
                      // show: false,
                      color: '#959eaf',
                      // fontFamily: 'Helvetica',
                      fontSize: 12
                    },
                    data: yData,
//                    data: ['One', 'Two', 'Three', 'Four', 'Five'],
                    inverse: true, // 是否是反向坐标轴
                    axisTick: {
                      alignWithLabel: true
                    },
                    // 坐标轴指示器的设置；指示坐标轴当前刻度的工具
                    // axisPointer: {
                    //   show: true,
                    //   type: 'shadow',
                    //   // shadowStyle: {},
                    //   label: {
                    //     backgroundColor: '#777'
                    //   }
                    // }
                  }
                ],
                xAxis: [
                  {
                    type: 'value',
                    name: 'Quantity',
                    axisLabel: {
                      interval: 0,
                      rotate: 40,
                      color: '#959eaf',
                      fontFamily: 'Helvetica'
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#959eaf'
                      }
                    }
                  }
                ],
                series: [
                  {
//                    name: '数量',
                    type: 'bar',
                    barWidth: '50%',
                    barMaxWidth: 50,
                    barMinHeight: 10,
                    data: xData,
//                    data: [10, 52, 200, 334, 390],
                    itemStyle: {
                      normal: {
                        color: '#786bcb'
                        // color: new this.echarts.graphic.LinearGradient(
                        //   0, 0, 1, 0,
//                    [
//                      {offset: 0, color: '#83bff6'},
//                      {offset: 0.5, color: '#188df0'},
//                      {offset: 1, color: '#188df0'}
//                    ]
//                           [
//                      {offset: 0, color: '#f00'},
//                      {offset: 0.5, color: '#ff0'},
//                      {offset: 1, color: '#090'}
//                             {offset: 0, color: '#786bcb'},
//                             {offset: 1, color: '#9c94cf'}
//                           ]
//                         ),
//                  barBorderRadius: 50
                        // barBorderRadius: [0, 50, 50, 0], //（顺时针左上，右上，右下，左下）
                        // shadowColor: 'rgba(0, 0, 0, 0.5)',
                        // shadowBlur: 10,
                        // shadowOffsetX: 10,
                        // shadowOffsetY: 10
                      },
                      emphasis: {
                        // borderColor: '#f00',
                        // borderWidth: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 10,
                        // shadowOffsetX: 5,
                        // shadowOffsetY: 10
                      }
//                 emphasis: {
//                   color: new this.echarts.graphic.LinearGradient(
//                     0, 0, 1, 0,
// //                    [
// //                      {offset: 0, color: '#83bff6'},
// //                      {offset: 0.5, color: '#188df0'},
// //                      {offset: 1, color: '#188df0'}
// //                    ]
//                     [
// //                      {offset: 0, color: '#f00'},
// //                      {offset: 0.5, color: '#ff0'},
// //                      {offset: 1, color: '#090'}
//                       {offset: 0, color: '#0dece1'},
//                       {offset: 1, color: '#cb86fe'}
//                     ]
//                   ),
// //                  barBorderRadius: 50
//                   barBorderRadius: [0, 50, 50, 0] //（顺时针左上，右上，右下，左下）
//                 }
                    },
                  }
                ]
              }
              barEcharts.setOption(option)
              this.claimBarLoading = false
              var barHeight = 20
              let bars = yData.length
              if (bars > 10) {
                claimBarEcharts.style.height = (bars * barHeight) + 'px'
              } else {
                claimBarEcharts.style.height = 200 + 'px'
              }
              barEcharts.resize()
            } else {
              this.claimBarLoading = false
              barEcharts.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              })
              claimBarEcharts.style.height = 200 + 'px'
              // console.log('service下bar对象data为空')
            }
          }
        })
      },
      drillCliamBarEcharts(areas, bus, pros) {
        this.claimBarLoading = true
        var value1 = areas || []
        var value2 = bus || this.finalBuValue
        var value3 = pros || []
        const _this = this
        this.axios.post('/search/bpBarForClaimTab.do', {
          username: getUsername(),
          tablename: 'service',
          areas: value1,
          bus: value2,
          products: value3,
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data
            const barEcharts = _this.echarts.init(document.getElementById('ClaimBar'), null, {renderer: 'canvas'})
            barEcharts.clear()
            barEcharts.hideLoading()
            if (Object.keys(resData.data).length !== 0) {
              var paramsData = {}
//              _this.accountBarRevenue = resData.data.revenue
//              _this.accountBarMachines = resData.data.machine
              var paramsData = resData.data.repair_so
              // y轴数据
              let yDataWithId = []
              for (let i in paramsData.name) {
                yDataWithId.push(`${paramsData.name[i]}(${paramsData.number[i]})`)
              }
              var yData = yDataWithId
//              var yData = [1, 2, 3, 4, 5]
              //X轴数据
              var xData = paramsData.value
              //bp_num数据
              _this.claimBpIdParams = paramsData.number
              var bpNumData = _this.claimBpIdParams
              var option = {
                title: {
                  text: _this.title2,
                  x: 'center'
                },
                color: ['#3398DB'],
                tooltip: {
                  formatter: function (params) {
                    // console.log(params)
                    return 'Name: ' + params.name + '<br />' + 'ID: ' + bpNumData[params.dataIndex] + '<br />' + 'Quantity: ' + _this.comdify(`${params.value}`)
                  },
                  backgroundColor: 'rgba(255,255,255,1)',
                  padding: [5, 10],
                  textStyle: {
                    color: '#7588E4'
                  },
                  extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
                  // trigger: 'item',
                  // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  //   type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  // }
                },
                // 坐标轴指示器的全局公用设置；指示坐标轴当前刻度的工具
                // axisPointer: {
                //   show: true,
                //   type: 'shadow',
                //   shadowStyle: {},
                //   label: {
                //     backgroundColor: '#777'
                //   }
                // },
                grid: {
                  left: '7%',
                  right: '80',
                  bottom: '3%',
                  top: 0,
                  containLabel: true
                },
                yAxis: [
                  {
                    type: 'category',
                    data: yData,
//                    data: ['One', 'Two', 'Three', 'Four', 'Five'],
                    inverse: true, // 是否是反向坐标轴
                    axisTick: {
                      alignWithLabel: true
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#f5f5f9'
                      }
                    },
                    axisLabel: {
                      interval: 0,
                      // show: false,
                      color: '#959eaf',
                      fontFamily: 'Helvetica',
                      fontSize: 13
                    },
                  }
                ],
                xAxis: [
                  {
                    type: 'value',
                    name: 'Quantity',
                    axisLabel: {
                      interval: 0,
                      rotate: 40,
                      color: '#959eaf',
                      fontFamily: 'Helvetica'
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#959eaf'
                      }
                    }
                  }
                ],
                series: [
                  {
//                    name: '数量',
                    type: 'bar',
                    barWidth: '50%',
                    barMaxWidth: 50,
                    barMinHeight: 10,
                    data: xData,
//                    data: [10, 52, 200, 334, 390],
                    itemStyle: {
                      normal: {
                        color: '#786bcb'
                        // color: new this.echarts.graphic.LinearGradient(
                        //   0, 0, 1, 0,
//                    [
//                      {offset: 0, color: '#83bff6'},
//                      {offset: 0.5, color: '#188df0'},
//                      {offset: 1, color: '#188df0'}
//                    ]
//                           [
//                      {offset: 0, color: '#f00'},
//                      {offset: 0.5, color: '#ff0'},
//                      {offset: 1, color: '#090'}
//                             {offset: 0, color: '#786bcb'},
//                             {offset: 1, color: '#9c94cf'}
//                           ]
//                         ),
//                  barBorderRadius: 50
                        // barBorderRadius: [0, 50, 50, 0], //（顺时针左上，右上，右下，左下）
                        // shadowColor: 'rgba(0, 0, 0, 0.5)',
                        // shadowBlur: 10,
                        // shadowOffsetX: 10,
                        // shadowOffsetY: 10
                      },
                      // emphasis: {
                      // borderColor: '#f00',
                      // borderWidth: 10,
                      // shadowColor: 'rgba(0, 0, 0, 0.5)',
                      // shadowBlur: 10,
                      // shadowOffsetX: 5,
                      // shadowOffsetY: 10
                      // }
//                 emphasis: {
//                   color: new this.echarts.graphic.LinearGradient(
//                     0, 0, 1, 0,
// //                    [
// //                      {offset: 0, color: '#83bff6'},
// //                      {offset: 0.5, color: '#188df0'},
// //                      {offset: 1, color: '#188df0'}
// //                    ]
//                     [
// //                      {offset: 0, color: '#f00'},
// //                      {offset: 0.5, color: '#ff0'},
// //                      {offset: 1, color: '#090'}
//                       {offset: 0, color: '#0dece1'},
//                       {offset: 1, color: '#cb86fe'}
//                     ]
//                   ),
// //                  barBorderRadius: 50
//                   barBorderRadius: [0, 50, 50, 0] //（顺时针左上，右上，右下，左下）
//                 }
                    },
                  }
                ]
              }
              barEcharts.setOption(option)
              this.claimBarLoading = false
            } else {
              this.claimBarLoading = false
              barEcharts.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              })
              // console.log('service下bar对象data为空')
            }
          }
        })
      },
      loadCliamLineEcharts() {
        this.claimLineLoading = true
        const _this = this
        this.axios.post('/search/fisYearLineForClimTab.do', {
          username: getUsername(),
          tablename: 'service', // 固定
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(res => {
          if (res.status === 200) {
            const lineEcharts = this.echarts.init(document.getElementById('ClaimLine'), null, {renderer: 'canvas'})
            lineEcharts.clear()
            lineEcharts.hideLoading()
            var resData = res.data.data
            if (Object.keys(resData).length !== 0) {
              //X轴数据
              var xData = resData.category
              var yData = resData.data
              var paramsData = yData.repair_so
              // 图例数据
              if (paramsData.length !== 0) {
                var legendData = paramsData.map(item => {
                  return item.year
                })
                // console.log(legendData)
                // 颜色数组
                // var colorArr = ['#3d62f2', '#913af6', '#47a7f8', '#69e3f2', '#9f37c1', '#d73ffd', '#f08351', '#c24039', '#83eb78', '#2bd22f', '#ffc801', '#ffe403', '#ec5fa8', '#c2398d']
                var i = 0
                // series数据
                var seriesData = []
                paramsData.map(item => {
                  seriesData.push({
                    name: item.year,
                    type: 'line',
                    data: item.data,
                    // smooth: true,
                    itemStyle: {
                      emphasis: {
                        barBorderRadius: 7
                      },
                      normal: {
                        barBorderRadius: 7,
                        color: new _this.echarts.graphic.LinearGradient(
                          0, 0, 1, 0,
                          [
                            {offset: 0, color: this.optionColors[i]},
                            {offset: 1, color: this.optionColors[i]}
                          ]
                        )
                      }
                    },
                    smooth: true,
                    lineStyle: {
                      normal: {
                        width: 2,
                        // shadowColor: 'rgba(116, 35, 244, 0.5)',
                        // shadowBlur: 12,
                        // shadowOffsetX: 0,
                        // shadowOffsetY: 5,
                      }
                    }
                  })
                  i++
                  if (i > _this.optionColors.length) {
                    i = 0
                  }
                  // console.log('-------------')
                  // console.log(seriesData)
                })
                lineEcharts.clear()
                var option = {
                  tooltip: {
                    trigger: 'axis',
                    textStyle: {
                      align: 'left',
                      color: '#7588E4'
                    },
                    backgroundColor: 'rgba(255,255,255,1)',
                    padding: [5, 10],
                    extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
                  },
                  legend: {
                    data: legendData,
                    right: 'right',
                    top: 20,
                    itemGap: 20,
                    // right: 'right',
//                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                  },
                  grid: {
                    left: '1%',
                    right: '10%',
                    bottom: '9%',
                    top: 30,
                    containLabel: true
                  },
                  xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xData,
//                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
//                   name: 'Month',
                    axisLine: {
                      lineStyle: {
                        color: '#959eaf'
                      }
                    },
                    axisTick: {
                      show: false
                    },
                    axisLabel: {
                      color: '#959eaf',
                      // fontFamily: 'Helvetica',
                      fontSize: 12
                    },
                  },
                  yAxis: {
                    type: 'value',
                    name: 'Quantity',
                    axisTick: {
                      show: false
                    },
                    axisLabel: {
                      // interval: 0,
                      // rotate: 40,
                      color: '#959eaf',
                      // fontFamily: 'Helvetica',
                      fontSize: 12
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#959eaf'
                      }
                    },
                    splitLine: {
                      lineStyle: {
                        color: ['#f5f5f9']
                      }
                    }
                  },
                  series: seriesData
//              series: [
//                {
//                  name: '邮件营销',
//                  type: 'line',
//                  data: [120, 132, 101, 134, 90, 230, 210],
//                  itemStyle: {
//                    emphasis: {
//                      barBorderRadius: 7
//                    },
//                    normal: {
//                      barBorderRadius: 7,
//                      color: new this.echarts.graphic.LinearGradient(
//                        0, 0, 1, 0,
//                        [
//                          {offset: 0, color: '#a2fd3e'},
//                          {offset: 1, color: '#048b33'}
//
//                        ]
//                      )
//                    }
//                  }
//                },
//                {
//                  name: '联盟广告',
//                  type: 'line',
//                  data: [220, 182, 191, 234, 290, 330, 310],
//                  itemStyle: {
//                    emphasis: {
//                      barBorderRadius: 7
//                    },
//                    normal: {
//                      barBorderRadius: 7,
//                      color: new this.echarts.graphic.LinearGradient(
//                        0, 0, 1, 0,
//                        [
//                          {offset: 0, color: '#95efef'},
//                          {offset: 1, color: '#0779ef'}
//                        ]
//                      )
//                    }
//                  }
//                },
//                {
//                  name: '视频广告',
//                  type: 'line',
//                  data: [150, 232, 201, 154, 190, 330, 410],
//                  itemStyle: {
//                    emphasis: {
//                      barBorderRadius: 7
//                    },
//                    normal: {
//                      barBorderRadius: 7,
//                      color: new this.echarts.graphic.LinearGradient(
//                        0, 0, 1, 0,
//                        [
//                          {offset: 0, color: '#aeb4ff'},
//                          {offset: 0.5, color: '#bf80ff'},
//                          {offset: 1, color: '#7f21e0'}
//
//                        ]
//                      )
//                    }
//                  }
//                },
//                {
//                  name: '直接访问',
//                  type: 'line',
//                  data: [320, 332, 301, 334, 390, 330, 320],
//                  itemStyle: {
//                    emphasis: {
//                      barBorderRadius: 7
//                    },
//                    normal: {
//                      barBorderRadius: 7,
//                      color: new this.echarts.graphic.LinearGradient(
//                        0, 0, 1, 0,
//                        [
//                          {offset: 0, color: '#ffc4bd'},
//                          {offset: 0.5, color: '#fa6453'},
//                          {offset: 1, color: '#a52263'}
//
//                        ]
//                      )
//                    }
//                  }
//                },
//                {
//                  name: '搜索引擎',
//                  type: 'line',
//                  data: [820, 932, 901, 934, 1290, 1330, 1320],
//                  itemStyle: {
//                    emphasis: {
//                      barBorderRadius: 7
//                    },
//                    normal: {
//                      barBorderRadius: 7,
//                      color: new this.echarts.graphic.LinearGradient(
//                        0, 0, 1, 0,
//                        [
//                          {offset: 0, color: '#f00'},
//                          {offset: 0.5, color: '#ff0'},
//                          {offset: 1, color: '#090'}
//
//                        ]
//                      )
//                    }
//                  }
//                }
//              ]
                }
                lineEcharts.clear()
                lineEcharts.setOption(option)
                this.claimLineLoading = false
              } else {
                this.claimLineLoading = false
                lineEcharts.showLoading('default', {
                  text: 'No Data',
                  color: '#fff',
                  textColor: '#959595',
                  maskColor: 'rgb(255, 255, 255)',
                  zlevel: 0
                })
              }
            } else {
              this.claimLineLoading = false
              lineEcharts.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              })
              // console.log('line对象data为空')
            }
          }
        })
      },
      drillCliamLineEcharts(areas, bpNums, bus, pros) {
        this.claimLineLoading = true
        var value1 = areas || []
        var value2 = bpNums || []
        var value3 = bus || this.finalBuValue
        var value4 = pros || []
        const _this = this
        this.axios.post('/search/fisYearLineForClimTab.do', {
          username: getUsername(),
          tablename: 'service', // 固定
          areas: value1,
          bp_nums: value2,
          products: value4,
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: value3,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(res => {
          if (res.status === 200) {
            const lineEcharts = this.echarts.init(document.getElementById('ClaimLine'), null, {renderer: 'canvas'})
            lineEcharts.clear()
            lineEcharts.hideLoading()
            var resData = res.data.data
            if (Object.keys(resData).length !== 0) {
              //X轴数据
              var xData = resData.category
              var yData = resData.data
              var paramsData = yData.repair_so
              // 图例数据
              var legendData = paramsData.map(item => {
                return item.year
              })
              // console.log(legendData)
              // 颜色数组
              var colorArr = ['#3d62f2', '#913af6', '#47a7f8', '#69e3f2', '#9f37c1', '#d73ffd', '#f08351', '#c24039', '#83eb78', '#2bd22f', '#ffc801', '#ffe403', '#ec5fa8', '#c2398d']
              var i = 0
              // series数据
              var seriesData = []
              paramsData.map(item => {
                seriesData.push({
                  name: item.year,
                  type: 'line',
                  data: item.data,
                  // smooth: true,
                  itemStyle: {
                    emphasis: {
                      barBorderRadius: 7
                    },
                    normal: {
                      barBorderRadius: 7,
                      color: new _this.echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                          {offset: 0, color: colorArr[i]},
                          {offset: 1, color: colorArr[i + 1]}
                        ]
                      )
                    }
                  },
                  smooth: true,
                  lineStyle: {
                    normal: {
                      width: 2,
//                      shadowColor: 'rgba(116, 35, 244, 0.5)',
//                      shadowBlur: 12,
//                      shadowOffsetX: 0,
//                      shadowOffsetY: 5,
                    }
                  }
                })
                i += 2
                if (i > 8) {
                  i = 0
                }
                // console.log('-------------')
                // console.log(seriesData)
              })
              lineEcharts.clear()
              var option = {
                tooltip: {
                  trigger: 'axis',
                  textStyle: {
                    align: 'left',
                    color: '#7588E4'
                  },
                  backgroundColor: 'rgba(255,255,255,1)',
                  padding: [5, 10],
                  extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
                },
                legend: {
                  data: legendData,
                  right: 'right',
                  top: 20,
                  itemGap: 20,
                  // right: 'right',
//                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                },
                grid: {
                  left: '1%',
                  right: '10%',
                  bottom: '9%',
                  top: 30,
                  containLabel: true
                },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: xData,
//                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
//                   name: 'Month'
                  axisLine: {
                    lineStyle: {
                      color: '#959eaf'
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    color: '#959eaf',
                    // fontFamily: 'Helvetica',
                    fontSize: 12
                  },
                },
                yAxis: {
                  type: 'value',
                  name: 'Quantity',
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    // interval: 0,
                    // rotate: 40,
                    color: '#959eaf',
                    // fontFamily: 'Helvetica',
                    fontSize: 12
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#959eaf'
                    }
                  },
                  splitLine: {
                    lineStyle: {
                      color: ['#f5f5f9']
                    }
                  }
                },
                series: seriesData
//              series: [
//                {
//                  name: '邮件营销',
//                  type: 'line',
//                  data: [120, 132, 101, 134, 90, 230, 210],
//                  itemStyle: {
//                    emphasis: {
//                      barBorderRadius: 7
//                    },
//                    normal: {
//                      barBorderRadius: 7,
//                      color: new this.echarts.graphic.LinearGradient(
//                        0, 0, 1, 0,
//                        [
//                          {offset: 0, color: '#a2fd3e'},
//                          {offset: 1, color: '#048b33'}
//
//                        ]
//                      )
//                    }
//                  }
//                },
//                {
//                  name: '联盟广告',
//                  type: 'line',
//                  data: [220, 182, 191, 234, 290, 330, 310],
//                  itemStyle: {
//                    emphasis: {
//                      barBorderRadius: 7
//                    },
//                    normal: {
//                      barBorderRadius: 7,
//                      color: new this.echarts.graphic.LinearGradient(
//                        0, 0, 1, 0,
//                        [
//                          {offset: 0, color: '#95efef'},
//                          {offset: 1, color: '#0779ef'}
//                        ]
//                      )
//                    }
//                  }
//                },
//                {
//                  name: '视频广告',
//                  type: 'line',
//                  data: [150, 232, 201, 154, 190, 330, 410],
//                  itemStyle: {
//                    emphasis: {
//                      barBorderRadius: 7
//                    },
//                    normal: {
//                      barBorderRadius: 7,
//                      color: new this.echarts.graphic.LinearGradient(
//                        0, 0, 1, 0,
//                        [
//                          {offset: 0, color: '#aeb4ff'},
//                          {offset: 0.5, color: '#bf80ff'},
//                          {offset: 1, color: '#7f21e0'}
//
//                        ]
//                      )
//                    }
//                  }
//                },
//                {
//                  name: '直接访问',
//                  type: 'line',
//                  data: [320, 332, 301, 334, 390, 330, 320],
//                  itemStyle: {
//                    emphasis: {
//                      barBorderRadius: 7
//                    },
//                    normal: {
//                      barBorderRadius: 7,
//                      color: new this.echarts.graphic.LinearGradient(
//                        0, 0, 1, 0,
//                        [
//                          {offset: 0, color: '#ffc4bd'},
//                          {offset: 0.5, color: '#fa6453'},
//                          {offset: 1, color: '#a52263'}
//
//                        ]
//                      )
//                    }
//                  }
//                },
//                {
//                  name: '搜索引擎',
//                  type: 'line',
//                  data: [820, 932, 901, 934, 1290, 1330, 1320],
//                  itemStyle: {
//                    emphasis: {
//                      barBorderRadius: 7
//                    },
//                    normal: {
//                      barBorderRadius: 7,
//                      color: new this.echarts.graphic.LinearGradient(
//                        0, 0, 1, 0,
//                        [
//                          {offset: 0, color: '#f00'},
//                          {offset: 0.5, color: '#ff0'},
//                          {offset: 1, color: '#090'}
//
//                        ]
//                      )
//                    }
//                  }
//                }
//              ]
              }
              lineEcharts.clear()
              lineEcharts.setOption(option)
              this.claimLineLoading = false
            } else {
              this.claimLineLoading = false
              lineEcharts.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              })
              // console.log('line对象data为空')
            }
          }
        })
      },

      loadCliamBar2Echarts() {
        this.claimBar2Loading = true
        this.claimReturnIcon = false
        const _this = this
        this.axios.post('/search/buBarForClaimTab.do', {
          username: getUsername(),
          tablename: 'service',
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data
            const barEcharts = _this.echarts.init(document.getElementById('ClaimBar2'), null, {renderer: 'canvas'})
            const claimBarEcharts2 = document.getElementById('ClaimBar2')
            barEcharts.clear()
            barEcharts.hideLoading()
            if (Object.keys(resData.data).length !== 0) {
              var paramsData = {}
//              _this.accountBarRevenue = resData.data.revenue
//              _this.accountBarMachines = resData.data.machine
              var paramsData = resData.data.repair_so
              // y轴数据
              // let yDataWithId = []
              // for (let i in paramsData.name) {
              //   yDataWithId.push(`${paramsData.name[i]}(${paramsData.number[i]})`)
              // }
              var yData = paramsData.name
//              var yData = [1, 2, 3, 4, 5]
              //X轴数据
              var xData = paramsData.value
              var option = {
                title: {
                  text: _this.title2,
                  x: 'center'
                },
                color: ['#3398DB'],
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  },
                  textStyle: {
                    align: 'left',
                    color: '#7588E4'
                  },
                  backgroundColor: 'rgba(255,255,255,1)',
                  padding: [5, 10],
                  extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
                },
                grid: {
                  left: '3%',
                  right: '3%',
//                  bottom: -50,
                  bottom: '3%',
                  top: 30,
                  containLabel: true
                },
                xAxis: [
                  {
                    type: 'category',
                    data: yData,
//                    data: ['One', 'Two', 'Three', 'Four', 'Five'],
                    inverse: true, // 是否是反向坐标轴
                    axisTick: {
                      alignWithLabel: true
                    },
                    axisLabel: {
                      interval: 0,
                      // rotate: 40,
                      color: '#959eaf',
                      // fontFamily: 'Helvetica',
                      textStyle: {
                        fontSize: 10// 让字体变大
                      }
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#959eaf'
                      }
                    }
                  }
                ],
                yAxis: [
                  {
                    type: 'value',
                    name: 'Quantity',
                    axisLabel: {
                      interval: 0,
                      // rotate: 40,
                      color: '#959eaf',
                      fontFamily: 'Helvetica'
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#959eaf'
                      }
                    }
                  }
                ],
                series: [
                  {
//                    name: '数量',
                    type: 'bar',
                    barWidth: '40%',
                    barMaxWidth: 50,
                    barMinHeight: 10,
                    data: xData,
//                    data: [10, 52, 200, 334, 390],
                    itemStyle: {
                      normal: {
                        color: new this.echarts.graphic.LinearGradient(
                          0, 0, 0, 1,
                          [
//                      {offset: 0, color: '#f00'},
//                      {offset: 0.5, color: '#ff0'},
//                      {offset: 1, color: '#090'}
                            {offset: 0, color: '#6ad8d2'},
                            {offset: 1, color: '#4faee8'}
                          ]
                        ),
//                  barBorderRadius: 50
                        // barBorderRadius: [50, 50, 0, 0], //（顺时针左上，右上，右下，左下）
                        // 阴影效果
                        // shadowBlur: 10,
                        // shadowColor: 'rgba(0, 0, 0, 0.5)',
                        // shadowOffsetX: 10,
                        // shadowOffsetY: 10
                      }
                    }
                  }
                ]
              }
              barEcharts.setOption(option)
              this.claimBar2Loading = false
              var barHeight = 20
              let bars = yData.length
              if (bars > 10) {
                claimBarEcharts2.style.height = (bars * barHeight) + 'px'
              } else {
                claimBarEcharts2.style.height = 200 + 'px'
              }
              barEcharts.resize()
            } else {
              this.claimBar2Loading = false
              this.showNoData.ClaimBar2 = true
              barEcharts.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              })
              // console.log('service下bar对象data为空')
            }
          }
        })
      },
      drillCliamBar2Echarts(areas, bpNums) {
        this.claimBar2Loading = true
        this.claimReturnIcon = false
        const _this = this
        var value1 = areas || []
        var value2 = bpNums || []
        this.axios.post('/search/buBarForClaimTab.do', {
          username: getUsername(),
          tablename: 'service',
          areas: value1,
          bp_nums: value2,
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data
            const barEcharts = _this.echarts.init(document.getElementById('ClaimBar2'), null, {renderer: 'canvas'})
            barEcharts.clear()
            barEcharts.hideLoading()
            if (Object.keys(resData.data).length !== 0) {
              var paramsData = {}
//              _this.accountBarRevenue = resData.data.revenue
//              _this.accountBarMachines = resData.data.machine
              var paramsData = resData.data.repair_so
              // y轴数据
              var yData = paramsData.name
//              var yData = [1, 2, 3, 4, 5]
              //X轴数据
              var xData = paramsData.value
              var option = {
                title: {
                  text: _this.title2,
                  x: 'center'
                },
                color: ['#3398DB'],
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  },
                  textStyle: {
                    align: 'left',
                    color: '#7588E4'
                  },
                  backgroundColor: 'rgba(255,255,255,1)',
                  padding: [5, 10],
                  extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
                },
                grid: {
                  left: '3%',
                  right: '3%',
//                  bottom: -50,
                  bottom: '3%',
                  top: 30,
                  containLabel: true
                },
                xAxis: [
                  {
                    type: 'category',
                    data: yData,
//                    data: ['One', 'Two', 'Three', 'Four', 'Five'],
                    inverse: true, // 是否是反向坐标轴
                    axisTick: {
                      alignWithLabel: true
                    },
                    axisLabel: {
                      // interval: 0,
                      // rotate: 40,
                      color: '#959eaf',
                      // fontFamily: 'Helvetica',
                      // textStyle: {
                      //   fontSize: 10 // 让字体变大
                      // }
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#959eaf'
                      }
                    }
                  }
                ],
                yAxis: [
                  {
                    type: 'value',
                    name: 'Quantity',
                    axisLabel: {
                      interval: 0,
                      // rotate: 40,
                      color: '#959eaf',
                      fontFamily: 'Helvetica'
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#959eaf'
                      }
                    }
                  }
                ],
                series: [
                  {
//                    name: '数量',
                    type: 'bar',
                    barWidth: '50%',
                    barMaxWidth: 50,
                    barMinHeight: 10,
                    data: xData,
//                    data: [10, 52, 200, 334, 390],
                    itemStyle: {
                      normal: {
                        color: new this.echarts.graphic.LinearGradient(
                          0, 0, 0, 1,
                          [
//                      {offset: 0, color: '#f00'},
//                      {offset: 0.5, color: '#ff0'},
//                      {offset: 1, color: '#090'}
                            {offset: 0, color: '#6ad8d2'},
                            {offset: 1, color: '#4faee8'}
                          ]
                        ),
//                  barBorderRadius: 50
                        //  barBorderRadius: [50, 50, 0, 0], //（顺时针左上，右上，右下，左下）
                        // 阴影效果
                        // shadowBlur: 10,
                        // shadowColor: 'rgba(0, 0, 0, 0.5)',
                        // shadowOffsetX: 10,
                        // shadowOffsetY: 10
                      }
                    }
                  }
                ]
              }
              barEcharts.setOption(option)
              this.claimBar2Loading = false
              // barEcharts.on('click', function(params) {
              //   _this.loadCliamChildBar(params.name)
              // })
            } else {
              this.claimBar2Loading = false
              barEcharts.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              })
              // console.log('service下bar对象data为空')
            }
          }
        })
      },
      loadCliamChildBar(value) {
        this.claimBar2Loading = true
        this.claimReturnIcon = true
        const _this = this
        this.axios.post('/search/brandBarForClaimTab.do', {
          username: getUsername(),
          tablename: 'service', // 固定
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: value,
          flag: this.result_flag,
          search_value: _this.search_value
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data
            const barEcharts = _this.echarts.init(document.getElementById('ClaimBar2'), null, {renderer: 'canvas'})
            const claimBarEcharts = document.getElementById('ClaimBar2')
            barEcharts.hideLoading()
            if (Object.keys(resData.data).length !== 0) {
              var paramsData = resData.data.repair_so
              // y轴数据
              var yData = paramsData.name
              // X轴数据
              var xData = paramsData.value
              var option = {
                color: ['#3398DB'],
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  },
                  textStyle: {
                    align: 'left',
                    color: '#7588E4'
                  },
                  backgroundColor: 'rgba(255,255,255,1)',
                  padding: [5, 10],
                  extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
                },
                grid: {
                  left: '3%',
                  right: 80,
                  bottom: '3%',
                  top: 20,
                  containLabel: true
                },
                yAxis: [
                  {
                    type: 'category',
                    data: yData,
//                    data: ['One', 'Two', 'Three', 'Four', 'Five'],
                    inverse: true, // 是否是反向坐标轴
                    axisTick: {
                      alignWithLabel: true
                    },
                    axisLabel: {
                      interval: 0,
                      // rotate: 40,
                      color: '#959eaf',
                      fontFamily: 'Helvetica'
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#959eaf'
                      }
                    }
                  }
                ],
                xAxis: [
                  {
                    type: 'value',
                    name: 'Quantity',
                    axisLabel: {
                      // interval: 0,
                      // rotate: 40,
                      color: '#959eaf',
                      fontFamily: 'Helvetica'
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#959eaf'
                      }
                    }
                  }
                ],
                series: [
                  {
                    type: 'bar',
                    barWidth: '50%',
                    barMaxWidth: 50,
                    barMinHeight: 10,
                    data: xData,
//                    data: [10, 52, 200, 334, 390],
                    itemStyle: {
                      normal: {
                        color: new this.echarts.graphic.LinearGradient(
                          0, 0, 1, 0,
                          [
//                      {offset: 0, color: '#f00'},
//                      {offset: 0.5, color: '#ff0'},
//                      {offset: 1, color: '#090'}
                            {offset: 0, color: '#4faee8'},
                            {offset: 1, color: '#6ad8d2'}
                          ]
                        ),
//                  barBorderRadius: 50
                        //    barBorderRadius: [0, 50, 50, 0] //（顺时针左上，右上，右下，左下）
                      }
                    }
                  }
                ]
              }
              barEcharts.setOption(option)
              this.claimBar2Loading = false
              var barHeight = 20
              let bars = yData.length
              if (bars > 10) {
                claimBarEcharts.style.height = (bars * barHeight) + 'px'
              } else {
                claimBarEcharts.style.height = 200 + 'px'
              }
              barEcharts.resize()
              // _this.returnIcon = true
            } else {
              this.claimBar2Loading = false
              // barEcharts.showLoading('default', {
              //   text: 'No Data',
              //   color: '#fff',
              //   textColor: '#959595',
              //   maskColor: 'rgb(255, 255, 255)',
              //   zlevel: 0
              // })
              // console.log('bar对象data为空')
            }
          }
        })
      },

      resizeChart() {
        const _this = this
        if (this.checkPermission_BG(['DCG'])) {
          this.$refs.ProductPreference.chartsResize()
          this.$refs.Survey.chartsResize()
        }
        if (_this.result_flag === 'account') {
          var accountPieEchart = _this.echarts.init(document.getElementById('pieEcharts'), null, {renderer: 'canvas'})
          var accountbarEchart = _this.echarts.init(document.getElementById('barEcharts'), null, {renderer: 'canvas'}) // 柱状图的写在了展示图表的函数里；因为有相应传参;但这里还得声明，为了下面的自适应调整
        }
        // bp和account共有的
        var accountLieEchart = _this.echarts.init(document.getElementById('echart'), null, {renderer: 'canvas'})
        var machineBarEchart = _this.echarts.init(document.getElementById('barTransaction'), null, {renderer: 'canvas'})
        var claimPieEchart = _this.echarts.init(document.getElementById('ClaimPie'), null, {renderer: 'canvas'})
        var claimBarEchart = _this.echarts.init(document.getElementById('ClaimBar'), null, {renderer: 'canvas'}) // 没有钻去的{第一个)柱状图
        var claimLineEchart = _this.echarts.init(document.getElementById('ClaimLine'), null, {renderer: 'canvas'})
        var claimBarEchart2 = _this.echarts.init(document.getElementById('ClaimBar2'), null, {renderer: 'canvas'}) // 有钻去功能的(第二个)父柱状图
        setTimeout(function () {
          if (_this.result_flag === 'account') {
            accountPieEchart.resize()
            accountbarEchart.resize()
          }
          accountLieEchart.resize()
          machineBarEchart.resize()
          claimPieEchart.resize()
          claimBarEchart.resize()
          claimBarEchart2.resize()
          claimLineEchart.resize()
          if (_this.checkPermission_BG(['DCG'])) {
            _this.isosEchartsObj.isEchart.resize()
            _this.isosEchartsObj.osEchart.resize()
          }
        }, 200)
      },

      autoSort(param1, param2) {
        // console.log(param1)
        // console.log('测试')
        // console.log(param2)
        return param1.customname.localeCompare(param2.customname)
//        var str;
//        str.sort (function(a,b){return a.localeCompare(b)})

      },
      showID(value) {
        this.AccountList.checkbox.ID = value
      },
      showName(value) {
        this.AccountList.checkbox.Name = value
      },
      showGeo(value) {
        this.AccountList.checkbox.Geo = value
      },
      TaBaction(key) {
        var _this = this;
        _this.key = key;
        Avatar.push([
          'track',
          [
            'category',
            'loginSuccess',
            'label',
            {
              url: getUrl(),
              userName: getUsername(),
              pageurl: getPageName(),
              childName: _this.key
            },
            0
          ]
        ]);
      },
      // 组织关系图
      showEcharts2() {
//        console.log(this.graphData)// 数组
//        console.log(this.graphData[0])// investment
        let investmentData = this.graphData[0].investment.map(item => {
          return {
            name: item.invest_company_name,
            des: item.investment_amount,
            symbolSize: 100,
            itemStyle: {
              normal: {
                color: 'red'
              }
            }
          }
        })
//        let chart2Datas = investmentData
        // data
        let chart2Datas = [
          {
//            name: '联想',
            name: this.searchTag.tagTitle,
            des: '大公司',
            symbolSize: 100,
            itemStyle: {
              normal: {
                color: '#090'
              }
            }
          }
        ]
        chart2Datas = chart2Datas.concat(investmentData)
        // links
        let linkArr = this.graphData[0].investment.map(item => {
          return {
//            source: '联想',
            source: this.searchTag.tagTitle,
            target: item.invest_company_name,
            name: '投资',
            des: '联想是老大' + item.status
          }
        })

        let myChart2 = this.echarts.init(document.getElementById('echart2'), null, {renderer: 'canvas'})
        var option = {
//          title: {
//            text: '家族关系图谱'
//          },
          // 浮层显示
          tooltip: {
            formatter: function (x) {
              return x.data.des
            }
          },
          series: [{
            type: 'graph',
            // 图的布局
            layout: 'force',
            // 两端大小
            symbolSize: 80,
            // 鼠标缩放和平移漫游
            roam: true,
            // 边线两端的标记类型，这里是箭头
            edgeSymbol: ['circle', 'arrow'],
            // 大小
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              normal: {
                textStyle: {
                  fontSize: 20
                }
              }
            },
            // 力引导布局配置
            force: {
              repulsion: 2500,
              edgeLength: [10, 50]
            },
            // 节点是否可拖拽
            draggable: true,
            itemStyle: {
              normal: {
                color: '#4b565b'
              }
            },
            lineStyle: {
              normal: {
                width: 3,
                color: '#4b565b'

              }
            },
            edgeLabel: {
              normal: {
                show: true,
                formatter: function (x) {
                  return x.data.name;
                }
              }
            },
            label: {
              normal: {
                show: true,
                textStyle: {}
              }
            },
            // 节点数据列表
            data: chart2Datas,
//            data: [
//              {
//                name: '联想',
//                des: '大公司',
//                symbolSize: 100,
//                itemStyle: {
//                  normal: {
//                    color: 'red'
//                  }
//                }
//              }, {
//                name: '百度',
//                des: '大公司',
//                itemStyle: {
//                  normal: {
//                    color: 'red'
//                  }
//                }
//              }, {
//                name: '腾讯',
//                des: '大公司',
//                symbolSize: 100
//              }, {
//                name: '车之家',
//                des: '互联网公司',
//                itemStyle: {
//                  normal: {
//                    color: 'red'
//                  }
//                }
//              }, {
//                name: '中国移动',
//                des: '小公司',
//                itemStyle: {
//                  normal: {
//                    color: 'red'
//                  }
//                }
//              }, {
//                name: 'A公司',
//                symbolSize: 100
//              }, {
//                name: 'B企业',
//                itemStyle: {
//                  normal: {
//                    color: 'red'
//                  }
//                }
//              }, {
//                name: 'C',
//              }
//            ],
            // 节点间的关系数据
            links: linkArr
//            links: [
//              {
//                source: '联想',
//                target: 'A公司',
//                name: '控股',
//                des: '联想是A的老大'
//              }, {
//                source: '联想',
//                target: '百度',
//                name: '投资'
//              }, {
//                source: '百度',
//                target: '腾讯',
//                name: '投资'
//              }, {
//                source: '联想',
//                target: '中国移动',
//                name: '投资'
//              }, {
//                source: '联想',
//                target: '车之家',
//                name: '控股'
//              }, {
//                source: '车之家',
//                target: 'C',
//                name: '投资'
//              }, {
//                source: '腾讯',
//                target: 'B企业',
//                name: '投资'
//              }, {
//                source: '联想',
//                target: 'B企业',
//                name: '投资'
//              }, {
//                source: '联想',
//                target: 'c',
//                name: '控股'
//              }
//            ]
          }]
        }
        myChart2.setOption(option)
      },
      change(params) {
        // console.log(params)
        //
        // var num = Number(params.index) + 1
        // var demo = `tab-${num}`
        // console.log(demo)
        // var activeDom = document.getElementById(demo)
        // console.log(activeDom)
        // console.log(activeDom.offsetWidth)
        // // 下边条的
        // var barDom = document.getElementsByClassName('el-tabs__active-bar')[0]
        // console.log(barDom)
        // // barDom.style.height = 300 + 'px'
        // barDom.style.transform = 'translateX(300px)'
        // console.log(barDom.style.transform)
        // console.log(1)


        this.resizeChart()
        // try {
        //   this.touchablePersonList.api.sizeColumnsToFit()
        //   this.gridOptions.api.sizeColumnsToFit()
        //   this.machineOptions.api.sizeColumnsToFit()
        //   this.claimOptions.api.sizeColumnsToFit()
        //   this.isTableColsOptions.api.sizeColumnsToFit()
        //   this.osTableColsOptions.api.sizeColumnsToFit()
        // } catch (error) {
        //   console.log(error)
        // }

        // this.show = n
      },
      fallBack() {
        this.$router.go(-1)
        // this.$router.push({path: '/CustomerProfile'})
      },
      // formatter(row, column) {
      //   return row.address
      // },
      jumpProfile() {
        const _this = this
        var params = {
          search_value: this.search_value,
          flag: this.result_flag,
          bp_name: this.searchTag.tagTitle
        }
        // newSearchResult页头部具体信息请求
        // 12.27 特定接口产参： bp和group都=>传name值；只这一个接口，其他的不变
        // this.result_name
        this.axios.post('/search/crawlerCompBaseInfo.do', {
//          search_value: '北京银行股份有限公司'
          search_value: _this.result_name,
        }).then(response => {
          if (response.status === 200) {
            var resData = response.data.data
            _this.companyInfo.redistration_address = resData.redistration_address
            _this.companyInfo.company_type = resData.company_type
            _this.companyInfo.approval_date = resData.approval_date
            _this.companyInfo.operating_term = resData.operating_term
            _this.companyInfo.redistration_authority = resData.redistration_authority
            _this.companyInfo.company_scope = resData.company_scope
            _this.companyInfo.register_number = resData.register_number
            _this.companyInfo.social_credit_code = resData.social_credit_code
            _this.companyInfo.corporation_tax = resData.corporation_tax
            _this.companyInfo.industry = resData.industry
            _this.companyInfo.organization_code = resData.organization_code
            _this.searchTag.website = resData.website
            if (resData.website) {
              _this.searchTag.handleWebsite = resData.website.indexOf('http://') !== -1
                ? resData.website.slice(7).toLowerCase()
                : resData.website.slice(8).toLowerCase()
            }
          }
        })
      },
//       jumpProfile() {
//         const _this = this
//         var params = {
//           search_value: this.search_value,
//           flag: this.result_flag,
//           bp_name: this.searchTag.tagTitle
//         }
//         // newSearchResult页头部显示Tag
//         this.axios.post('/search/getProfile.do', params).then(response => {
//           if (response.status === 200) {
//             var resData = response.data.data
//             var item = []
// //            _this.searchTag.tagNumber = resData['Account Number']
//             let filterRows = resData.rows[0].filter(item => item !== '')
//             _this.searchTag.tagShow = filterRows
//           }
//         })
//         // newSearchResult页头部具体信息请求
//         this.axios.post('/search/crawlerCompBaseInfo.do', {
// //          search_value: '北京银行股份有限公司'
//           search_value: _this.search_value
//         }).then(response => {
//           if (response.status === 200) {
//             var resData = response.data.data
//             // console.log('哈哈')
//             // console.log(resData)
//             _this.companyInfo.redistration_address = resData.redistration_address
//             _this.companyInfo.company_type = resData.company_type
//             _this.companyInfo.approval_date = resData.approval_date
//             _this.companyInfo.operating_term = resData.operating_term
//             _this.companyInfo.redistration_authority = resData.redistration_authority
//             _this.companyInfo.company_scope = resData.company_scope
//             _this.companyInfo.register_number = resData.register_number
//             _this.companyInfo.social_credit_code = resData.social_credit_code
//             _this.companyInfo.corporation_tax = resData.corporation_tax
//             _this.companyInfo.industry = resData.industry
//             _this.companyInfo.organization_code = resData.organization_code
//             _this.searchTag.website = resData.website
//             if (resData.website) {
//               _this.searchTag.handleWebsite = resData.website.indexOf('http://') !== -1
//                 ? resData.website.slice(7)
//                 : resData.website.slice(8)
//             }
//           }
//         })
//       },
      butChange(n) {
        if (this.radio1 === '1') {
          this.echartsDatas = this.echartsData1
          this.showEcharts()
        } else if (this.radio1 === '2') {
          this.echartsDatas = this.echartsData2
          this.showEcharts()
        } else if (this.radio1 === '3') {
          this.echartsDatas = this.echartsData3
          this.showEcharts()
        }
      },
      // 个人信息表
      loadPersonList() {
        const _this = this
        this.axios.post('/search/touchablePersonList.do', {
          search_value: _this.search_value,
          page: _this.personListTab.currentPage1,
          rows: _this.personListTab.pageSize1
        }).then(response => {
          var resData = response.data.data
//          _this.personListTab.currentPage1 = resData.page
          _this.personListTab.total = resData.total
          // _this.personListTab.personListData = _this.personListTab.personListData.concat(resData.data)
          _this.personListTab.personListData = resData.data
          _this.touchablePersonList.api.setRowData(_this.personListTab.personListData)
          // _this.touchablePersonList.api.sizeColumnsToFit()
          _this.tabLoading = false
          _this.tabLoadingNew = false
        })
      },
      loadPersonList2(value) {
        const _this = this
        this.axios.post('/search/touchablePersonList.do', {
          search_value: value,
          page: _this.personListTab.currentPageNew,
          rows: _this.personListTab.pageSizeNew
        }).then(response => {
          var resData = response.data.data
          console.log(resData, 'resDataresDataresDataresData');
//          _this.personListTab.currentPage1 = resData.page
          _this.personListTab.totalNew = resData.total
          // _this.personListTab.personListDataNew = _this.personListTab.personListDataNew.concat(resData.data)
          _this.personListTab.personListDataNew = resData.data
          _this.gridOptionsTouchablePersonList.api.setRowData(_this.personListTab.personListDataNew)
          // _this.gridOptionsTouchablePersonList.api.sizeColumnsToFit()
//          _this.personListTab.personListData = resData.data
          _this.tabLoadingNew = false
        })
      },
      // 详情奇方法
      async loadDetailData(paramsID) {
        this.detailLoading = true;
        let params = {
          username: getUsername(),
          tablename: 'account',
          areas: this.accountAreas,
          bp_nums: [paramsID],
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          fismonths: this.fismonths, // 折线图年月
          bus: this.finalBuValue,
          flag: this.result_flag,
          search_value: this.search_value,
          page: this.detailTablePage,
          rows: this.perDetailTableData,
        }
        let res = await this.axios.post('search/snDetailList.do', params, {timeout: 30000})
        // let res = await this.axios.post('/search/snDetailList.do', params)
        console.log('细节详情')
        console.log(res)
        let resData = res.data.data
        this.totalDetailTableTotal = resData.total
        this.totalDetailTableData = resData.data
        this.gridOptionsDetailData.api.setRowData(this.totalDetailTableData)
//        this.gridOptionsDetailData.api.sizeColumnsToFit()
        this.detailLoading = false;
      },
      async toMachineDetail(prod_family) {
        try {
          this.dialogDetailVisibleMachine = true
          this.detailMachineLoading = true
          let params = {
            username: getUsername(),
            tablename: 'account',
            geos: this.geoValue,
            regions: this.regionValue,
            countrys: this.countryValue,
            fisyears: this.accountYearValue,
            bus: this.snDetailBuValue,
            // products: this.snDetailProValue,
            wty_flag: this.machineFlag,
            flag: this.result_flag,
            search_value: this.search_value,
            page: this.detailTablePageMachine,
            rows: this.perDetailTableDataMachine,
            products: prod_family
          }
          let res = await this.axios.post('search/snDetailList.do', params, {timeout: 30000})
          // console.log('Machine下细节详情')
          // console.log(res)
          let resData = res.data.data
          this.totalDetailTableDataMachine = resData.total
          console.log(this.gridOptionsDetailDataMachine)
          this.gridOptionsDetailDataMachine.api.setRowData(resData.data)
        } catch (error) {
          console.log(error)
        }
        this.detailMachineLoading = false
      },
      loadPersonListNew(row, column, cell, event) {
        this.tabLoadingNew = true
        // console.log('1111111111')
        // console.log(row)
        // console.log(column)
        // console.log(cell)
        // console.log(column.label)
        // console.log(column.label === 'person')
        // console.log(cell.className.trim())
        // 234
        // 456
        // 678
        if (column.label === 'Touchable Person') {
          // alert('点击的是小人')
          const _this = this
          this.axios.post('/search/touchablePersonList.do', {
            search_value: row.bp_number,
            page: 1,
            rows: 30
          }).then(response => {
            var resData = response.data.data
//          _this.personListTab.currentPage1 = resData.page
//             _this.personListTab.total = resData.total
//             _this.personListTab.personListData = _this.personListTab.personListData.concat(resData.data)
            _this.personListTab.currentPageNew = 1
            _this.personListTab.personListDataNew = resData.data
            _this.personListTab.totalNew = resData.total
            setTimeout(function () {
              _this.tabLoadingNew = false
            }, 1000)
            var num = document.getElementsByClassName('el-table__body-wrapper').length
            // console.log(num)
            var domNode = document.getElementsByClassName('el-table__body-wrapper')[num - 1] // 每页30+4个原有的表格
            // 1 34 33
            // 2 94 93
            // var domNode = document.getElementsByClassName('el-table__body-wrapper')
            // var domNode2 = document.getElementsByClassName('is-scroll-left')
            // console.log('表格有多少')
            // console.log(domNode)
            // console.log(domNode2)
            // console.log(domNode.scrollHeight) //滚动条的高度
            // console.log(domNode.scrollTop) // 滚动条距离上部的高度
            // console.log(domNode.clientHeight)// 内容高度
            domNode.addEventListener('scroll', function () {
              // console.log('滚动执行了')
              // 判断scrollTop !== 0防止滚屏后切换再加载一次原来的
              if ((domNode.scrollTop !== 0) && (domNode.scrollHeight - domNode.scrollTop - 0.7 <= domNode.clientHeight)) {
                // console.log('条件正常')
                _this.tabLoadingNew = true
                _this.personListTab.currentPageNew += 1
                // console.log(row.bp_number)
                _this.loadPersonList2(row.bp_number)
              }
            })
          })
        } else {
          console.log('错')
        }
        // this.personListTab.currentPage1 = 1
        // this.personListTab.pageSize1 = 30
        // const _this = this
//         this.axios.post('/search/touchablePersonList.do', {
//           search_value: _this.search_value,
//           page: _this.personListTab.currentPage1,
//           rows: _this.personListTab.pageSize1
//         }).then(response => {
//           var resData = response.data.data
// //          _this.personListTab.currentPage1 = resData.page
//           _this.personListTab.total = resData.total
//           // _this.personListTab.personListData = _this.personListTab.personListData.concat(resData.data)
//          _this.personListTab.personListData = resData.data
//           _this.tabLoading = false
//         })
      },
      jumpGraphData() {
        const _this = this
        this.axios.post('/search/investmentRelation.do', {
          search_value: '北京银行股份有限公司'
//          search_value: _this.search_value,
        }).then(response => {
          if (response.status === 200) {
            var resData = response.data.data
            _this.graphData = resData
            // _this.showEcharts2()
          }
        })
      },

//       loadAccountList() {
//         const _this = this
//         this.axios.post('/search/accountBpList.do', {
//           username: getUsername(),
//           tablename: 'account',
//           geos: this.geoValue,
//           regions: this.regionValue,
//           countrys: this.countryValue,
//           fisyears: this.accountYearValue,
//           bus: this.finalBuValue,
//           flag: 'account', // 固定，因为bp进来不展示这个。不进行请求
//           search_value: _this.search_value,
//           page: _this.AccountList.currentPage2,
//           rows: _this.AccountList.pageSize2
//         }).then(response => {
//           var resData = response.data.data
//           // console.log('大大大大大大')
//           // console.log(resData)
// //          _this.AccountList.currentPage2 = resData.page
//           _this.AccountList.total = _this.comdify(resData.total.toString())
//           _this.AccountList.ListTableData = _this.AccountList.ListTableData.concat(resData.rows)
//           _this.tabLoading = false
//           // console.log(_this.AccountList.ListTableData)
//         })
//       },
      loadAccountList(value1, value2) {
        this.accountLoading = true;
        var value1 = value1 || []
        var value2 = value2 || []
        const _this = this
        this.axios.post('/search/accountBpList.do', {
          username: getUsername(),
          tablename: 'account',
          areas: value1,
          bp_nums: value2,
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: 'account', // 固定，因为bp进来不展示这个。不进行请求
          search_value: _this.search_value,
          page: _this.AccountList.currentPage2,
          rows: _this.AccountList.pageSize2
        }).then(response => {
          var resData = response.data.data
          // console.log('大大大大大大')
          // console.log(resData)
//          _this.AccountList.currentPage2 = resData.page
//           _this.AccountList.total = _this.comdify(resData.total.toString())
          _this.AccountList.total = resData.total
          // _this.AccountList.ListTableData = _this.AccountList.ListTableData.concat(resData.rows)
          _this.AccountList.ListTableData = resData.rows
          _this.tabLoading = false
          // console.log(_this.AccountList.ListTableData)
          try {
            _this.gridOptions.api.setRowData(_this.AccountList.ListTableData)
            // _this.gridOptions.api.sizeColumnsToFit()
          } catch (error) {
            console.log(error)
          }
          this.accountLoading = false;
          // var dataSource = {
          //   rowCount: null, // behave as infinite scroll
          //   getRows: function (params) {
          //     console.log('asking for ' + params.startRow + ' to ' + params.endRow);
          //     // At this point in your code, you would call the server, using $http if in AngularJS 1.x.
          //     // To make the demo look real, wait for 500ms before returning
          //     setTimeout( function() {
          //       // take a slice of the total rows
          //       var rowsThisPage = _this.AccountList.ListTableData.slice(params.startRow, params.endRow);
          //       // if on or after the last page, work out the last row.
          //       var lastRow = -1;
          //       if (_this.AccountList.ListTableData.length <= params.endRow) {
          //         lastRow = _this.AccountList.ListTableData.length;
          //       }
          //       // call the success callback
          //       params.successCallback(rowsThisPage, lastRow);
          //     }, 500);
          //   }
          // };
          // this.gridOptions.api.setDatasource(dataSource);
        })
      },
//       loadMachine(value) {
//         const _this = this
//         var value = value || []
//         this.axios.post('/search/machineTableList.do', {
//           username: getUsername(),
//           tablename: 'machine',
//           geos: this.geoValue,
//           regions: this.regionValue,
//           countrys: this.countryValue,
//           fisyears: this.accountYearValue,
//           bus: this.finalBuValue,
//           search_value: _this.search_value,
//           flag: _this.result_flag,
//           page: _this.TransactionDocument.currentPage3,
//           rows: _this.TransactionDocument.pageSize3
//         }).then(response => {
//           if (response.status === 200) {
//             var resData = response.data.data
// //            console.log(_this.TransactionDocument.currentPage3)
// //            console.log(resData)
// //            _this.TransactionDocument.currentPage3 = resData.page
//             _this.TransactionDocument.total = _this.comdify(resData.total.toString())
//             _this.TransactionDocument.transactionTableData = _this.TransactionDocument.transactionTableData.concat(resData.rows)
//             _this.tabLoading = false
// //            console.log(_this.TransactionDocument.transactionTableData)
//           }
//         })
//       },
      loadMachineBu(value) {
        const _this = this
        this.transactionLoading = true;
        if (value) {
          if (value.length === 0) {
            var value = this.finalBuValue
          } else {
            var value = value
          }
        } else {
          var value = this.finalBuValue
          // var value = value || this.finalBuValue
        }
        this.axios.post('/search/machineTableList.do', {
          username: getUsername(),
          tablename: 'machine',
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: value,
          search_value: _this.search_value,
          flag: _this.result_flag,
          page: _this.TransactionDocument.currentPage3,
          rows: _this.TransactionDocument.pageSize3
        }).then(response => {
          if (response.status === 200) {
            var resData = response.data.data
//            console.log(_this.TransactionDocument.currentPage3)
//            console.log(resData)
//            _this.TransactionDocument.currentPage3 = resData.page
            _this.TransactionDocument.total = resData.total
            // _this.TransactionDocument.total = _this.comdify(resData.total.toString())
            // _this.TransactionDocument.transactionTableData = _this.TransactionDocument.transactionTableData.concat(resData.rows)
            _this.TransactionDocument.transactionTableData = resData.rows
            try {
              _this.machineOptions.api.setRowData(_this.TransactionDocument.transactionTableData)
              // _this.machineOptions.api.sizeColumnsToFit()
            } catch (error) {
              console.log(error)
            }
            _this.tabLoading = false
//            console.log(_this.TransactionDocument.transactionTableData)
          }
          this.transactionLoading = false;
        })
      },
      loadMachinePro(value) {
        const _this = this
        this.transactionLoading = true;
        var value = value || []
        this.axios.post('/search/machineTableList.do', {
          username: getUsername(),
          tablename: 'machine',
          products: value,
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          search_value: _this.search_value,
          flag: _this.result_flag,
          page: _this.TransactionDocument.currentPage3,
          rows: _this.TransactionDocument.pageSize3
        }).then(response => {
          if (response.status === 200) {
            var resData = response.data.data
//            console.log(_this.TransactionDocument.currentPage3)
//            console.log(resData)
//            _this.TransactionDocument.currentPage3 = resData.page
            _this.TransactionDocument.total = resData.total
            // _this.TransactionDocument.total = _this.comdify(resData.total.toString())
            // _this.TransactionDocument.transactionTableData = _this.TransactionDocument.transactionTableData.concat(resData.rows)
            _this.TransactionDocument.transactionTableData = resData.rows
            try {
              _this.machineOptions.api.setRowData(_this.TransactionDocument.transactionTableData)
              // _this.machineOptions.api.sizeColumnsToFit()
            } catch (error) {
              console.log(error)
            }
            _this.tabLoading = false
//            console.log(_this.TransactionDocument.transactionTableData)
          }
          this.transactionLoading = false;
        })
      },
      loadService() {
        const _this = this
        this.axios.post('/search/getServicesList.do', {
          username: getUsername(),
          tablename: 'service',
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          search_value: _this.search_value,
          flag: _this.result_flag,
          page: _this.Service.currentPage5,
          rows: _this.Service.pageSize5
        }).then(response => {
          if (response.status === 200) {
            var resData = response.data.data
//            _this.Service.currentPage5 = resData.page
            _this.Service.total = resData.total
            // _this.Service.total = _this.comdify(resData.total.toString())
            _this.Service.serviceTableData = resData.rows
            // _this.Service.serviceTableData = _this.Service.serviceTableData.concat(resData.rows)
            try {
              _this.claimOptions.api.setRowData(_this.Service.serviceTableData)
              // _this.claimOptions.api.sizeColumnsToFit()
              if (_this.checkPermission_BG(['DCG'])) {
                _this.isTableColsOptions.api.setRowData(_this.isTableRows) // 权限注释
                // _this.isTableColsOptions.api.sizeColumnsToFit()
                _this.osTableColsOptions.api.setRowData(_this.osTableRows) // 权限注释
              }
              // _this.osTableColsOptions.api.sizeColumnsToFit()
            } catch (error) {
              console.log(error)
            }
            _this.tabLoading = false
//            _this.tabLoading2 = false
//             console.log(_this.Service.serviceTableData)
          }
        })
      },
      inItAccountList() {
        // alert('init')
        this.tabLoading = true
        this.AccountList.currentPage2 = 1
        const _this = this
        this.axios.post('/search/accountBpList.do', {
          username: getUsername(),
          tablename: 'account',
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: 'account', // 固定，因为bp进来不展示这个。不进行请求
          search_value: _this.search_value,
          page: _this.AccountList.currentPage2,
          rows: _this.AccountList.pageSize2
        }).then(response => {
          var resData = response.data.data
//          _this.AccountList.currentPage2 = resData.page
          _this.AccountList.total = _this.comdify(resData.total.toString())
          _this.AccountList.ListTableData = resData.rows
          _this.tabLoading = false
        })
      },
      inItMachineList() {
        this.tabLoading = true
        this.TransactionDocument.currentPage3 = 1
        const _this = this
        this.axios.post('/search/machineTableList.do', {
          username: getUsername(),
          tablename: 'machine',
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: this.result_flag,
          search_value: _this.search_value,
          page: _this.TransactionDocument.currentPage3,
          rows: _this.TransactionDocument.pageSize3
        }).then(response => {
          var resData = response.data.data
//          _this.AccountList.currentPage2 = resData.page
//           _this.TransactionDocument.total = resData.total
          _this.TransactionDocument.total = _this.comdify(resData.total.toString())
          _this.TransactionDocument.transactionTableData = resData.rows
          _this.machineOptions.api.setRowData(_this.TransactionDocument.transactionTableData)
          _this.tabLoading = false
        })
      },
      inItServiceList() {
        this.tabLoading = true
        this.Service.currentPage5 = 1
        const _this = this
        this.axios.post('/search/getServicesList.do', {
          username: getUsername(),
          tablename: 'account',
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          flag: this.result_flag,
          search_value: _this.search_value,
          page: _this.Service.currentPage5,
          rows: _this.Service.pageSize5
        }).then(response => {
          var resData = response.data.data
//          _this.AccountList.currentPage2 = resData.page
          _this.Service.total = resData.total
          _this.Service.serviceTableData = resData.rows
          _this.tabLoading = false
        })
      },
      drillInItAccountList(value1, value2) {
        this.tabLoading = true
        // this.AccountList.currentPage2 = 1
        var value1 = value1 || []
        var value2 = value2 || []
        const _this = this
        this.axios.post('/search/accountBpList.do', {
          username: getUsername(),
          tablename: 'account',
          areas: value1,
          bp_nums: value2,
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: 'account', // 固定，因为bp进来不展示这个。不进行请求
          search_value: _this.search_value,
          page: _this.AccountList.currentPage2,
          rows: _this.AccountList.pageSize2
        }).then(response => {
          var resData = response.data.data
//          _this.AccountList.currentPage2 = resData.page
//           _this.AccountList.total = _this.comdify(resData.total.toString())
          _this.AccountList.total = resData.total
          _this.AccountList.ListTableData = resData.rows
          try {
            _this.gridOptions.api.setRowData(_this.AccountList.ListTableData)
            // _this.gridOptions.api.sizeColumnsToFit()
          } catch (error) {
            console.log(error)
          }
          _this.tabLoading = false
        })
      },
      drillMachineListBu(value) {
        this.tabLoading = true
        // this.TransactionDocument.currentPage3 = 1
        const _this = this
        var value = value || []
        this.axios.post('/search/machineTableList.do', {
          username: getUsername(),
          tablename: 'machine',
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: value,
          flag: this.result_flag,
          search_value: _this.search_value,
          page: _this.TransactionDocument.currentPage3,
          rows: _this.TransactionDocument.pageSize3
        }).then(response => {
          var resData = response.data.data
//          _this.AccountList.currentPage2 = resData.page
//           _this.TransactionDocument.total = _this.comdify(resData.total.toString())
          _this.TransactionDocument.total = resData.total
          _this.TransactionDocument.transactionTableData = resData.rows
          try {
            _this.machineOptions.api.setRowData(_this.TransactionDocument.transactionTableData)
            // _this.machineOptions.api.sizeColumnsToFit()
          } catch (error) {
            console.log(error)
          }
          _this.tabLoading = false
        })
      },
      drillMachineListPro(value) {
        this.tabLoading = true
        // this.TransactionDocument.currentPage3 = 1
        const _this = this
        var value = value || []
        this.axios.post('/search/machineTableList.do', {
          username: getUsername(),
          tablename: 'machine',
          products: value,
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          bus: this.finalBuValue,
          flag: this.result_flag,
          search_value: _this.search_value,
          page: _this.TransactionDocument.currentPage3,
          rows: _this.TransactionDocument.pageSize3
        }).then(response => {
          var resData = response.data.data
//          _this.AccountList.currentPage2 = resData.page
//           _this.TransactionDocument.total = _this.comdify(resData.total.toString())
          _this.TransactionDocument.total = resData.total
          _this.TransactionDocument.transactionTableData = resData.rows
          try {
            _this.machineOptions.api.setRowData(_this.TransactionDocument.transactionTableData)
            // _this.machineOptions.api.sizeColumnsToFit()
          } catch (error) {
            console.log(error)
          }
          _this.tabLoading = false
        })
      },
      drillInItServiceList(areas, bpNums, bus, pros) {
        this.tabLoading = true
        this.serviceLoading = true;
        const _this = this
        var value1 = areas || []
        var value2 = bpNums || []
        var value3 = bus || this.finalBuValue
        var value4 = pros || []
        this.axios.post('/search/getServicesList.do', {
          username: getUsername(),
          tablename: 'service',
          areas: value1,
          bp_nums: value2,
          products: value4,
          bus: value3,
          geos: this.geoValue,
          regions: this.regionValue,
          countrys: this.countryValue,
          fisyears: this.accountYearValue,
          flag: this.result_flag,
          search_value: _this.search_value,
          page: _this.Service.currentPage5,
          rows: _this.Service.pageSize5
        }).then(response => {
          var resData = response.data.data
//          _this.AccountList.currentPage2 = resData.page
          _this.Service.total = resData.total
          _this.Service.serviceTableData = resData.rows
          // try {
          //   _this.claimOptions.api.setRowData(_this.Service.serviceTableData)
          //   _this.claimOptions.api.sizeColumnsToFit()
          //   _this.isTableColsOptions.api.setRowData(_this.isTableRows)
          //   _this.isTableColsOptions.api.sizeColumnsToFit()
          //   _this.osTableColsOptions.api.setRowData(_this.osTableRows)
          //   _this.osTableColsOptions.api.sizeColumnsToFit()
          // } catch (error) {
          //   console.log(error)
          // }
          _this.tabLoading = false;
          this.serviceLoading = false;
        })
      },

      // k线股票stock数据
      getLocalTime(nS) {
        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ')
      },
      loadStockEchart(id) {
        var stockEchart = this.echarts.init(document.getElementById(id))
        var upColor = '#ec0000'
        var upBorderColor = '#8A0000'
        var downColor = '#00da3c'
        var downBorderColor = '#008F28'
        var _this = this
// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
//        data0 = {
//          categoryData: 时间数组,
//          values: 二维数组数据
//        }
//        var data0 = splitData([
//          ['2013/1/24', 2320.26,2320.26,2287.3,2362.94],
//          ['2013/1/25', 2300,2291.3,2288.26,2308.38],
//          ['2013/1/28', 2295.35,2346.5,2295.35,2346.92],
//          ['2013/1/29', 2347.22,2358.98,2337.35,2363.8],
//          ['2013/1/30', 2360.75,2382.48,2347.89,2383.76],
//          ['2013/1/31', 2383.43,2385.42,2371.23,2391.82],
//          ['2013/2/1', 2377.41,2419.02,2369.57,2421.15],
//          ['2013/2/4', 2425.92,2428.15,2417.58,2440.38],
//          ['2013/2/5', 2411,2433.13,2403.3,2437.42],
//          ['2013/2/6', 2432.68,2434.48,2427.7,2441.73],
//          ['2013/2/7', 2430.69,2418.53,2394.22,2433.89],
//          ['2013/2/8', 2416.62,2432.4,2414.4,2443.03],
//          ['2013/2/18', 2441.91,2421.56,2415.43,2444.8],
//          ['2013/2/19', 2420.26,2382.91,2373.53,2427.07],
//          ['2013/2/20', 2383.49,2397.18,2370.61,2397.94],
//          ['2013/2/21', 2378.82,2325.95,2309.17,2378.82],
//          ['2013/2/22', 2322.94,2314.16,2308.76,2330.88],
//          ['2013/2/25', 2320.62,2325.82,2315.01,2338.78],
//          ['2013/2/26', 2313.74,2293.34,2289.89,2340.71],
//          ['2013/2/27', 2297.77,2313.22,2292.03,2324.63],
//          ['2013/2/28', 2322.32,2365.59,2308.92,2366.16],
//          ['2013/3/1', 2364.54,2359.51,2330.86,2369.65],
//          ['2013/3/4', 2332.08,2273.4,2259.25,2333.54],
//          ['2013/3/5', 2274.81,2326.31,2270.1,2328.14],
//          ['2013/3/6', 2333.61,2347.18,2321.6,2351.44],
//          ['2013/3/7', 2340.44,2324.29,2304.27,2352.02],
//          ['2013/3/8', 2326.42,2318.61,2314.59,2333.67],
//          ['2013/3/11', 2314.68,2310.59,2296.58,2320.96],
//          ['2013/3/12', 2309.16,2286.6,2264.83,2333.29],
//          ['2013/3/13', 2282.17,2263.97,2253.25,2286.33],
//          ['2013/3/14', 2255.77,2270.28,2253.31,2276.22],
//          ['2013/3/15', 2269.31,2278.4,2250,2312.08],
//          ['2013/3/18', 2267.29,2240.02,2239.21,2276.05],
//          ['2013/3/19', 2244.26,2257.43,2232.02,2261.31],
//          ['2013/3/20', 2257.74,2317.37,2257.42,2317.86],
//          ['2013/3/21', 2318.21,2324.24,2311.6,2330.81],
//          ['2013/3/22', 2321.4,2328.28,2314.97,2332],
//          ['2013/3/25', 2334.74,2326.72,2319.91,2344.89],
//          ['2013/3/26', 2318.58,2297.67,2281.12,2319.99],
//          ['2013/3/27', 2299.38,2301.26,2289,2323.48],
//          ['2013/3/28', 2273.55,2236.3,2232.91,2273.55],
//          ['2013/3/29', 2238.49,2236.62,2228.81,2246.87],
//          ['2013/4/1', 2229.46,2234.4,2227.31,2243.95],
//          ['2013/4/2', 2234.9,2227.74,2220.44,2253.42],
//          ['2013/4/3', 2232.69,2225.29,2217.25,2241.34],
//          ['2013/4/8', 2196.24,2211.59,2180.67,2212.59],
//          ['2013/4/9', 2215.47,2225.77,2215.47,2234.73],
//          ['2013/4/10', 2224.93,2226.13,2212.56,2233.04],
//          ['2013/4/11', 2236.98,2219.55,2217.26,2242.48],
//          ['2013/4/12', 2218.09,2206.78,2204.44,2226.26],
//          ['2013/4/15', 2199.91,2181.94,2177.39,2204.99],
//          ['2013/4/16', 2169.63,2194.85,2165.78,2196.43],
//          ['2013/4/17', 2195.03,2193.8,2178.47,2197.51],
//          ['2013/4/18', 2181.82,2197.6,2175.44,2206.03],
//          ['2013/4/19', 2201.12,2244.64,2200.58,2250.11],
//          ['2013/4/22', 2236.4,2242.17,2232.26,2245.12],
//          ['2013/4/23', 2242.62,2184.54,2182.81,2242.62],
//          ['2013/4/24', 2187.35,2218.32,2184.11,2226.12],
//          ['2013/4/25', 2213.19,2199.31,2191.85,2224.63],
//          ['2013/4/26', 2203.89,2177.91,2173.86,2210.58],
//          ['2013/5/2', 2170.78,2174.12,2161.14,2179.65],
//          ['2013/5/3', 2179.05,2205.5,2179.05,2222.81],
//          ['2013/5/6', 2212.5,2231.17,2212.5,2236.07],
//          ['2013/5/7', 2227.86,2235.57,2219.44,2240.26],
//          ['2013/5/8', 2242.39,2246.3,2235.42,2255.21],
//          ['2013/5/9', 2246.96,2232.97,2221.38,2247.86],
//          ['2013/5/10', 2228.82,2246.83,2225.81,2247.67],
//          ['2013/5/13', 2247.68,2241.92,2231.36,2250.85],
//          ['2013/5/14', 2238.9,2217.01,2205.87,2239.93],
//          ['2013/5/15', 2217.09,2224.8,2213.58,2225.19],
//          ['2013/5/16', 2221.34,2251.81,2210.77,2252.87],
//          ['2013/5/17', 2249.81,2282.87,2248.41,2288.09],
//          ['2013/5/20', 2286.33,2299.99,2281.9,2309.39],
//          ['2013/5/21', 2297.11,2305.11,2290.12,2305.3],
//          ['2013/5/22', 2303.75,2302.4,2292.43,2314.18],
//          ['2013/5/23', 2293.81,2275.67,2274.1,2304.95],
//          ['2013/5/24', 2281.45,2288.53,2270.25,2292.59],
//          ['2013/5/27', 2286.66,2293.08,2283.94,2301.7],
//          ['2013/5/28', 2293.4,2321.32,2281.47,2322.1],
//          ['2013/5/29', 2323.54,2324.02,2321.17,2334.33],
//          ['2013/5/30', 2316.25,2317.75,2310.49,2325.72],
//          ['2013/5/31', 2320.74,2300.59,2299.37,2325.53],
//          ['2013/6/3', 2300.21,2299.25,2294.11,2313.43],
//          ['2013/6/4', 2297.1,2272.42,2264.76,2297.1],
//          ['2013/6/5', 2270.71,2270.93,2260.87,2276.86],
//          ['2013/6/6', 2264.43,2242.11,2240.07,2266.69],
//          ['2013/6/7', 2242.26,2210.9,2205.07,2250.63],
//          ['2013/6/13', 2190.1,2148.35,2126.22,2190.1]
//        ])
//        function splitData(rawData) {
//          var categoryData = []
//          var values = []
//          for (var i = 0; i < rawData.length; i++) {
//            categoryData.push(rawData[i].splice(0, 1)[0])
//            values.push(rawData[i])
//          }
//          return {
//            categoryData: categoryData,
//            values: values
//          }
//        }
//        function calculateMA(dayCount) {
//          var result = []
//          for (var i = 0, len = data0.values.length; i < len; i++) {
//            if (i < dayCount) {
//              result.push('-');
//              continue;
//            }
//            var sum = 0;
//            for (var j = 0; j < dayCount; j++) {
//              sum += data0.values[i - j][1];
//            }
//            result.push(sum / dayCount);
//          }
//          return result;
//        }
        function calculateMA(dayCount) {
          console.log(_this.stockHistory.stockData)
          var result = []
          for (var i = 0, len = _this.stockHistory.stockData.length; i < len; i++) {
            if (i < dayCount) {
              result.push('-')
              continue
            }
            var sum = 0
            for (var j = 0; j < dayCount; j++) {
              sum += _this.stockHistory.stockData[i - j][1]
            }
            result.push(sum / dayCount)
          }
          return result
        }

        var option = {
//          backgroundColor: '#21202D',
          title: {
            text: 'CBI股票上证指数',
            left: 0
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          legend: {
            data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
          },
          grid: {
            left: '10%',
            right: '10%',
            bottom: '15%'
          },
          xAxis: {
            type: 'category',
            data: this.stockHistory.stockTime,
            scale: true,
            boundaryGap: false,
            axisLine: {onZero: false},
            splitLine: {show: false},
            splitNumber: 20,
            min: 'dataMin',
            max: 'dataMax'
          },
          yAxis: {
            scale: true,
            splitArea: {
              show: true
            }
          },
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100
            },
            {
              show: true,
              type: 'slider',
              y: '90%',
              start: 50,
              end: 100
            }
          ],
          series: [
            {
              name: '日K',
              type: 'candlestick',
              data: this.stockHistory.stockData,
              itemStyle: {
                normal: {
                  color: upColor,
                  color0: downColor,
                  borderColor: upBorderColor,
                  borderColor0: downBorderColor
                }
              },
              markPoint: {
                label: {
                  normal: {
                    formatter: function (param) {
                      return param != null ? Math.round(param.value) : ''
                    }
                  }
                },
                data: [
                  {
                    name: 'XX标点',
                    coord: ['2013/5/31', 2300],
                    value: 2300,
                    itemStyle: {
                      normal: {color: 'rgb(41,60,85)'}
                    }
                  },
                  {
                    name: 'highest value',
                    type: 'max',
                    valueDim: 'highest'
                  },
                  {
                    name: 'lowest value',
                    type: 'min',
                    valueDim: 'lowest'
                  },
                  {
                    name: 'average value on close',
                    type: 'average',
                    valueDim: 'close'
                  }
                ],
                tooltip: {
                  formatter: function (param) {
                    return param.name + '<br>' + (param.data.coord || '');
                  }
                }
              },
              markLine: {
                symbol: ['none', 'none'],
                data: [
                  [
                    {
                      name: 'from lowest to highest',
                      type: 'min',
                      valueDim: 'lowest',
                      symbol: 'circle',
                      symbolSize: 10,
                      label: {
                        normal: {show: false},
                        emphasis: {show: false}
                      }
                    },
                    {
                      type: 'max',
                      valueDim: 'highest',
                      symbol: 'circle',
                      symbolSize: 10,
                      label: {
                        normal: {show: false},
                        emphasis: {show: false}
                      }
                    }
                  ],
                  {
                    name: 'min line on close',
                    type: 'min',
                    valueDim: 'close'
                  },
                  {
                    name: 'max line on close',
                    type: 'max',
                    valueDim: 'close'
                  }
                ]
              }
            },
            {
              name: 'MA5',
              type: 'line',
              data: calculateMA(5),
              smooth: true,
              lineStyle: {
                normal: {opacity: 0.5}
              }
            },
            {
              name: 'MA10',
              type: 'line',
              data: calculateMA(10),
              smooth: true,
              lineStyle: {
                normal: {opacity: 0.5}
              }
            },
            {
              name: 'MA20',
              type: 'line',
              data: calculateMA(20),
              smooth: true,
              lineStyle: {
                normal: {opacity: 0.5}
              }
            },
            {
              name: 'MA30',
              type: 'line',
              data: calculateMA(30),
              smooth: true,
              lineStyle: {
                normal: {opacity: 0.5}
              }
            },

          ]
        }
//        console.log(option)
//        console.log(option.series[0].data)
//        console.log(option.series[0].data[0])
//        console.log(option.series[0].data[0][0])
        stockEchart.setOption(option)
      },
      loadStockHistory() {
        const _this = this
        this.axios.post('http://api.stock.cbitest.lenovo.com/stock_trend/600028').then(res => {
          if (res.status === 200) {
            var resData = res.data
            console.log('-------------------')
            console.log(resData)
            _this.stockHistory.stockTime = resData.data.map(item => {
              return _this.getLocalTime(item.datetime / 1000)
//              ms时间戳转s
//              return item.stock_time / 1000
            })
            resData.data.map(item => {
//              开盘(open)，收盘(close)，最低(low)，最高(high)
              var list = [item.open, item.close, item.low, item.high]
              _this.stockHistory.stockData.push(list)
              return _this.stockHistory.stockData
            })
//            console.log('------------')
//            console.log(_this.stockHistory.stockTime)
//            console.log(_this.stockHistory.stockData)
            _this.loadStockEchart('kEchart')
          }
        })
      },
      // 主要接口
      loadGeo() {
        const _this = this
        this.axios.post('/search/authGeoForSearch.do', {
          username: getUsername()
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data.data
            // console.log('geo数据')
            // console.log(resData)
            var datas = resData.geo.map(item => ({value: item, label: item, disabled: false}))
            _this.geoData = datas
            _this.geoDataTransaction = datas
            _this.geoDataMachine = datas
            _this.geoDataService = datas
          }
        })
      },
      loadRegion() {
        const _this = this
        this.axios.post('/search/authRegionForSearch.do', {
          username: getUsername()
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data.data
            // console.log('region数据')
            // console.log(resData)
            var datas = resData.region.map(item => ({value: item, label: item, disabled: false}))
            _this.regionData = datas
            _this.regionDataTransaction = datas
            _this.regionDataMachine = datas
            _this.regionDataService = datas
          }
        })
      },
      loadCountry() {
        const _this = this
        this.axios.post('/search/authCountryForSearch.do', {
          username: getUsername()
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data.data
            // console.log('country数据')
            // console.log(resData)
            var datas = resData.country.map(item => ({value: item, label: item, disabled: false}))
            _this.countryData = datas
            _this.countryDataTransaction = datas
            _this.countryDataMachine = datas
            _this.countryDataService = datas
          }
        })
      },
      loadAccountYear() {
        const _this = this
        this.axios.post('/search/fiscalYearList.do', {
          username: getUsername(),
          search_value: _this.search_value,
          flag: this.result_flag
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data.data
            // console.log('年数据')
            // console.log(resData)
            _this.accountYearData = resData.year.map(item => ({value: item, label: item}))
            for (let i in resData.billing_year_fis) {
              _this.accountYearData[i].label = resData.billing_year_fis[i]
            }
            // console.log(_this.accountYearData)
          }
        })
      },
      loadFinalBu() {
        const _this = this
        this.axios.post('/search/fianlBuList.do', {
          username: getUsername()
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data.data
            // console.log('FinalBu数据')
            // console.log(resData)
            _this.finalBuData = resData.bu.map(item => ({value: item, label: item}))
          }
        })
      },
      changeAccountGeo() {
        // 表格初始化页数
        this.AccountList.currentPage2 = 1
        this.TransactionDocument.currentPage3 = 1
        this.Service.currentPage5 = 1
        const _this = this
        this.axios.post('/search/authGeoForSearch.do', {
          username: getUsername(),
          geos: this.geoValue
        }).then(res => {
          if (res.status === 200) {
            _this.regionData = []
            _this.regionValue = []
            _this.countryData = []
            _this.countryValue = []
            var resData = res.data.data
            // console.log('geo改变后的数据')
            // console.log(resData)
            if (resData.region) {
              _this.regionData = resData.region.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadRegion()
            }
            if (resData.country) {
              _this.countryData = resData.country.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadCountry()
            }
            // Account下
            _this.accountAreas = []
            _this.accountBpNums = []
            _this.loadAccountPieEcharts()
            _this.loadAccountBarEcharts()
            // _this.inItAccountList()
            _this.loadAccountList()
            _this.jumpEchart()
            // Machine 下
            _this.machineProducts = []
            _this.machineBu = []
            _this.loadMachineBarEcharts()
            // _this.inItMachineList()
            _this.loadMachineBu()
            _this.loadWarrantyDataBu()
            // Service下
            // _this.inItServiceList()
            _this.drillInItServiceList()
            _this.loadCliamPieEcharts()
            _this.loadCliamBarEcharts()
            _this.loadCliamLineEcharts()
            _this.loadCliamBar2Echarts()
          }
        })
      },
      changeAccountRegion() {
        // 表格初始化页数
        this.AccountList.currentPage2 = 1
        this.TransactionDocument.currentPage3 = 1
        this.Service.currentPage5 = 1
        const _this = this
        this.axios.post('/search/authRegionForSearch.do', {
          username: getUsername(),
          regions: this.regionValue
        }).then(res => {
          if (res.status === 200) {
            _this.countryData = []
            _this.countryValue = []
            var resData = res.data.data
            // console.log('region改变后的数据')
            // console.log(resData)
            if (resData.country) {
              _this.countryData = resData.country.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadCountry()
            }
            // Account下
            _this.accountAreas = []
            _this.accountBpNums = []
            _this.loadAccountPieEcharts()
            _this.loadAccountBarEcharts()
            _this.loadAccountList()
            _this.jumpEchart()
            // Machine 下
            _this.machineProducts = []
            _this.machineBu = []
            _this.loadMachineBarEcharts()
            _this.loadMachineBu()
            _this.loadWarrantyDataBu()
            // Service下
            _this.drillInItServiceList()
            _this.loadCliamPieEcharts()
            _this.loadCliamBarEcharts()
            _this.loadCliamLineEcharts()
            _this.loadCliamBar2Echarts()
          }
        })
      },
      changeAccountCountry() {
        // 表格初始化页数
        this.AccountList.currentPage2 = 1
        this.TransactionDocument.currentPage3 = 1
        this.Service.currentPage5 = 1
        const _this = this
        this.axios.post('/search/authCountryForSearch.do', {
          username: getUsername(),
          countrys: this.countryValue
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data.data
            // console.log('country改变后的数据')
            // console.log(resData)
            // Account下
            _this.accountAreas = []
            _this.accountBpNums = []
            _this.loadAccountPieEcharts()
            _this.loadAccountBarEcharts()
            _this.loadAccountList()
            _this.jumpEchart()
            // Machine 下
            _this.machineProducts = []
            _this.machineBu = []
            _this.loadMachineBarEcharts()
            _this.loadMachineBu()
            _this.loadWarrantyDataBu()
            // Service下
            _this.drillInItServiceList()
            _this.loadCliamPieEcharts()
            _this.loadCliamBarEcharts()
            _this.loadCliamLineEcharts()
            _this.loadCliamBar2Echarts()
          }
        })
      },
      changeAccountYear() {
        // 表格初始化页数
        this.AccountList.currentPage2 = 1
        this.TransactionDocument.currentPage3 = 1
        this.Service.currentPage5 = 1
        // Account下
        this.accountAreas = []
        this.accountBpNums = []
        this.loadAccountPieEcharts()
        this.loadAccountBarEcharts()
        this.loadAccountList()
        this.jumpEchart()
        // Machine 下
        this.machineProducts = []
        this.machineBu = []
        this.loadMachineBarEcharts()
        this.loadMachineBu()
        this.loadWarrantyDataBu()
        // Service下
        this.drillInItServiceList()
        this.loadCliamPieEcharts()
        this.loadCliamBarEcharts()
        this.loadCliamLineEcharts()
        this.loadCliamBar2Echarts()
      },
      changeFinalBu() {
        // 表格初始化页数
        this.AccountList.currentPage2 = 1
        this.TransactionDocument.currentPage3 = 1
        this.Service.currentPage5 = 1
        // Account下
        this.accountAreas = []
        this.accountBpNums = []
        this.loadAccountPieEcharts()
        this.loadAccountBarEcharts()
        this.loadAccountList()
        this.jumpEchart()
        // Machine 下
        this.machineProducts = []
        this.machineBu = []
        this.loadMachineBarEcharts()
        this.loadMachineBu()
        this.loadWarrantyDataBu()
        // Service下
        this.drillInItServiceList()
        this.loadCliamPieEcharts()
        this.loadCliamBarEcharts()
        this.loadCliamLineEcharts()
        this.loadCliamBar2Echarts()
      },
      clearAll() {
        this.fismonths = []
        // 表格初始化页数
        this.AccountList.currentPage2 = 1
        this.TransactionDocument.currentPage3 = 1
        this.Service.currentPage5 = 1
        this.accountAreas = []
        this.accountBpNums = []
        this.machineProducts = []
        this.machineBu = []
        // this.AccountList.currentPage2 = 1
        if (this.result_flag !== 'bp') {
          this.geoValue = []
          this.regionValue = []
          this.countryValue = []
        }
        // this.geoValue = []
        // this.regionValue = []
        // this.countryValue = []
        this.accountYearValue = []
        this.finalBuValue = []
        this.loadGeo()
        this.loadRegion()
        this.loadCountry()
        // Account下
        this.loadAccountPieEcharts()
        this.loadAccountBarEcharts()
        this.loadAccountList()
        this.jumpEchart()
        this.radio1 = '1'
        // Machine 下
        this.loadMachineBarEcharts()
        this.loadMachineBu()
        this.radio2 = '1'
        this.loadWarrantyDataBu()
        // Service下
        this.drillInItServiceList()
        this.loadCliamPieEcharts()
        this.loadCliamBarEcharts()
        this.loadCliamLineEcharts()
        this.loadCliamBar2Echarts()
      },

      // 更换按钮
      changeRadio1(value) {
        // value 是字符串
        // this.loadAccountPieEcharts()
        // this.loadAccountBarEcharts()
        if (value === '1') {
          this.echartsDatas = this.echartsData1
          this.accountPieDatas = this.accountPieData1
          this.accountBarDatas = this.accountBarData1
          this.showEcharts()
          this.showAccountPieEcharts()
          this.showAccountBarEcharts()
          // console.log('这是Rev')
        }
        if (value === '2') {
          this.echartsDatas = this.echartsData2
          this.accountPieDatas = this.accountPieData2
          this.accountBarDatas = this.accountBarData2
          this.showEcharts()
          this.showAccountPieEcharts()
          this.showAccountBarEcharts()
          // console.log('这是GP')
        }
        if (value === '3') {
          this.echartsDatas = this.echartsData3
          this.accountPieDatas = this.accountPieData3
          this.accountBarDatas = this.accountBarData3
          this.showEcharts()
          this.showAccountPieEcharts()
          this.showAccountBarEcharts()
          // console.log('这是Sell In')
        }
      },
      changeRadio2(value) {
        this.returnIcon = false
        if (value === '1') {
          this.machineBarDatas = this.machineBarData1
          console.log(this.machineBarDatas)
          this.showMachineBarEcharts()
          // console.log('这是Rev')
        }
        if (value === '2') {
          this.machineBarDatas = this.machineBarData2
          console.log(this.machineBarDatas)
          this.showMachineBarEcharts()
          // console.log('这是GP')
        }
        if (value === '3') {
          this.machineBarDatas = this.machineBarData3
          console.log(this.machineBarDatas)
          this.showMachineBarEcharts()
          // console.log('这是Sell In')
        }
      },
      changeRadio3(value) {
        this.isosEchartsObj.isEchart.resize()
        this.isosEchartsObj.osEchart.resize()
        // if (value === '1') {
        // }
        // if (value === '2') {
        // }
      },
      selectRadio1(radio1) {
        var radio1 = radio1
        if (radio1 === '1') {
          this.echartsDatas = this.echartsData1
          this.accountPieDatas = this.accountPieData1
          this.accountBarDatas = this.accountBarData1
          // console.log('这是Rev')
        }
        if (radio1 === '2') {
          this.echartsDatas = this.echartsData2
          this.accountPieDatas = this.accountPieData2
          this.accountBarDatas = this.accountBarData2
          // console.log('这是GP')
        }
        if (radio1 === '3') {
          this.echartsDatas = this.echartsData3
          this.accountPieDatas = this.accountPieData3
          this.accountBarDatas = this.accountBarData3
          // console.log('这是Sell In')
        }
      },
      selectRadio2(radio2) {
        var radio2 = radio2
        if (radio2 === '1') {
          this.machineBarDatas = this.machineBarData1
          // console.log('这是Rev')
        }
        if (radio2 === '2') {
          this.machineBarDatas = this.machineBarData2
          // console.log('这是GP')
        }
        if (radio2 === '3') {
          this.machineBarDatas = this.machineBarData3
          // console.log('这是Sell In')
        }
      }
    },
    computed: {
      ...mapGetters(['language', 'sidebar'])
    },
    watch: {
//       '$route.query' (params) {
//         const _this = this
//         // console.log(params)
//         this.createAccountProfileColumnDefs()
// //      alert(window.screen.height)
// //      console.log(this.$route.query.search_value)
//         this.show = this.$route.query.show
//         this.search_value = this.$route.query.search_value
//         this.result_flag = this.$route.query.result_flag
//
//         this.searchTag.tagTitle = this.$route.query.resultTitle
//         this.searchTag.bpNumber = this.$route.query.bpNumber
//
//         this.Service.bpClaim = this.$route.query.bpClaim
//
//         if (this.result_flag === 'bp') {
//           // bp时调用下拉框禁用方法
//           this.dropSelectBan()
//           this.hideList = false
//           //      this.jumpPersonList()
//           this.loadPersonList()
//           // if (this.show === '2') {
//           //   this.show = '1'
//           // }
//         }
//         this.jumpProfile()
//         this.jumpEchart()
//
//         this.loadAccountList(this.accountAreas, this.accountBpNums)
//
//         this.loadMachineBu()
//         this.loadWarrantyDataBu()
//
//         this.loadService()
//         this.jumpGraphData()
// //      this.showEcharts2()放这不行，先执行了showEcharts2再执行的jumpGraphData里的回掉函数,执行顺序，异步
//         // Account List下的新增图表数据
//         this.loadGeo()
//         this.loadRegion()
//         this.loadCountry()
//         this.loadAccountYear()
//         this.loadFinalBu()
//         // mounted
//         this.initOptions() //初始化表头中英文
//
//         this.drag()
//         this.loadAccountPieEcharts()
//         this.loadAccountBarEcharts()
//
//         this.loadMachineBarEcharts()
//
//         this.loadCliamPieEcharts()
//         this.loadCliamBarEcharts()
//         this.loadCliamLineEcharts()
//         this.loadCliamBar2Echarts()
//
//         // bp和account共有的
//         var accountLieEchart = this.echarts.init(document.getElementById('echart'))
//         var machineBarEchart = this.echarts.init(document.getElementById('barTransaction'))
//         var claimPieEchart = this.echarts.init(document.getElementById('ClaimPie'))
//         var claimBarEchart = this.echarts.init(document.getElementById('ClaimBar')) // 没有钻去的{第一个)柱状图
//         var claimBarEchart2 = this.echarts.init(document.getElementById('ClaimBar2')) // 有钻去功能的(第二个)父柱状图
//
//       },
      'sidebar.opened': function () {
        // var accounPieEchart = this.echarts.init(document.getElementById('pieEcharts'))
        // setTimeout(function () {
        //   accounPieEchart.resize()
        //   console.log(accounPieEchart)
        // }, 200)
        // this.resizeChart() 不能直接执行，因为会有计算属性的影响。得计算完布局变化后才能resize,在函数里加定时器就好了
        this.resizeChart()
      },
      'personListTab.search': function () {
        this.globalSearch('gridOptionsTouchablePersonList', 'personListTab.search')
      },
      'AccountList.dialogVisible': function () {
        this.personListTab.search = ''
      }
    },
    beforeMount() {
      this.createAccountProfileColumnDefs()
//      alert(window.screen.height)
//      console.log(this.$route.query.search_value)
      this.show = this.$route.query.show
      this.search_value = this.$route.query.search_value
      this.result_flag = this.$route.query.result_flag

      // console.log('这是flag')
      // console.log(this.result_flag)
      // console.log('这是搜索值')
      // console.log(this.search_value)
      this.searchTag.tagTitle = this.$route.query.resultTitle
      this.searchTag.bpNumber = this.$route.query.bpNumber
      //claim表格总记录
      this.Service.bpClaim = this.$route.query.bpClaim
      // console.log('这是搜索结果')
      // console.log(this.searchTag.tagTitle)
      if (this.result_flag === 'bp') {
        this.result_name = this.$route.query.resultTitle
        // bp时调用下拉框禁用方法
        this.dropSelectBan()
        this.hideList = false
        //      this.jumpPersonList()
        this.loadPersonList()
        // if (this.show === '2') {
        //   this.show = '1'
        // }
      }
      if (this.result_flag === 'account') {
        this.result_name = this.$route.query.search_value
      }
      this.jumpProfile()
      this.jumpEchart()
//      this.jumpAccountList()
      this.loadAccountList(this.accountAreas, this.accountBpNums)
//      this.jumpTransaction()
      this.loadMachineBu()
      this.loadWarrantyDataBu()
//      this.jumpMachine()
//      this.jumpService()
      this.loadService()
      this.jumpGraphData()
//      this.showEcharts2()放这不行，先执行了showEcharts2再执行的jumpGraphData里的回掉函数,执行顺序，异步
      // Account List下的新增图表数据
      this.loadGeo()
      this.loadRegion()
      this.loadCountry()
      this.loadAccountYear()
      this.loadFinalBu()
      // this.loadTransactionYear()
      // this.loadMachineYear()
      // this.loadServiceYear()
    },
    mounted() {
      const _this = this
      if (_this.checkPermission_BG(['DCG'])) {
        // 权限注释第4个按钮内容 开始
        this.isosEchartsObj.isEchart = this.echarts.init(document.getElementById('isEchart'))
        this.isosEchartsObj.osEchart = this.echarts.init(document.getElementById('osEchart'))
        this.loadIsTableData()
        this.loadOsTableData()
        this.showIsEcharts()
        this.showOsEcharts()
        // 权限注释 结束
      }
      // this.$refs.tagEditDialog.close = function () {
      //   _this.editTagsVisible = false
      //   _this.getTags()
      // }
      // // 分页插件千分位
      // var testDoms = document.getElementsByClassName('el-pagination__total')
      // console.log(testDoms)
      // console.log(testDoms[0])
      // console.log('测试千sd分位')
      // console.log(testDoms.item(1))
      // ag-gread表格点击事件
      this.gridOptions.onCellClicked = function (params) {
        console.log(params)
        if (params.colDef.headerName.toLowerCase() === 'id') {
          var columnID = params.value
          var columnTitle = params.data.customer_name
          console.log(params)
          console.log(columnTitle)
          console.log(columnID)
          _this.$router.push({
            path: 'newSearchResult',
            query: {
              show: _this.show,
              search_value: columnID,
              resultTitle: columnTitle,
              result_flag: 'bp',
              bpNumber: columnID
            }
          })
        }
      }
      this.machineOptions.onCellClicked = function (params) {
        if (params.colDef.headerName.toLowerCase() === 'sold to') {
          var columnID = params.value
          var columnTitle = params.data.sold_to_name
          console.log(params)
          console.log(columnTitle)
          console.log(columnID)
          _this.$router.push({
            path: 'newSearchResult',
            query: {
              show: _this.show,
              search_value: columnID,
              resultTitle: columnTitle,
              result_flag: 'bp',
              bpNumber: columnID
            }
          })
        }
      }
      this.claimOptions.onCellClicked = function (params) {
        if (params.colDef.headerName.toLowerCase() === 'sold to') {
          var columnID = params.value
          var columnTitle = params.data.sold_to_name
          console.log(params)
          console.log(columnTitle)
          console.log(columnID)
          _this.$router.push({
            path: 'newSearchResult',
            query: {
              show: _this.show,
              search_value: columnID,
              resultTitle: columnTitle,
              result_flag: 'bp',
              bpNumber: columnID
            }
          })
        }
      }
      this.initOptions() //初始化表头中英文
//      this.appMainWidth = document.getElementsByClassName('app-main')[0].offsetWidth
//      this.loadStockHistory()
      this.loadAccountPieEcharts()
      this.loadAccountBarEcharts()
      // this.loadTransactionPieEcharts()
      this.loadMachineBarEcharts()
      // this.loadTransactionScatterEcharts()
      // this.loadMachinePieEcharts()
      // this.loadMachineBarEcharts()
      // this.loadMachineLineEcharts()
      this.loadCliamPieEcharts()
      this.loadCliamBarEcharts()
      this.loadCliamLineEcharts()
      this.loadCliamBar2Echarts()
      // this.loadServicePieEcharts()
      // this.loadServiceBarEcharts()
      // this.loadServiceLineEcharts()
      // this.tabScroll(0) // Account
      if (this.result_flag === 'account') {
        // alert('执行flag滚动')
        // this.tabScroll(2)// Machine
        // this.tabScroll(3) // Service
        var accountPieEchart = this.echarts.init(document.getElementById('pieEcharts'), null, {renderer: 'canvas'})
        var accountbarEchart = this.echarts.init(document.getElementById('barEcharts'), null, {renderer: 'canvas'}) // 柱状图的写在了展示图表的函数里；因为有相应传参;但这里还得声明，为了下面的自适应调整
        accountPieEchart.on('click', function (params) {
          // pieEcharts.off('click')
          //   console.log(_this)
          _this.accountAreas = [params.name]
          _this.accountBpNums = []

          // console.log(_this.accountAreas)
          // 饼图
          _this.drillAccountPieEcharts(_this.accountBpNums, _this.accountAreas, 'pie', params.color.colorStops)
          // 柱状图
          _this.drillAccountBarEcharts(_this.accountAreas)
          // 折线图
          _this.drillEchart(_this.accountAreas) // 传参数为数组
          // 表格
          _this.drillInItAccountList(_this.accountAreas)
        })
        // accountbarEchart写在echarts方法里了。不能拿出来。
      }
      if (this.result_flag === 'bp') {
        // this.tabScroll(1)// Machine
        // this.tabScroll(2) // Service
      }
      // bp和account共有的
      var accountLieEchart = this.echarts.init(document.getElementById('echart'), null, {renderer: 'canvas'})
      var machineBarEchart = this.echarts.init(document.getElementById('barTransaction'), null, {renderer: 'canvas'})
      var claimPieEchart = this.echarts.init(document.getElementById('ClaimPie'), null, {renderer: 'canvas'})
      var claimBarEchart = this.echarts.init(document.getElementById('ClaimBar'), null, {renderer: 'canvas'}) // 没有钻去的{第一个)柱状图
      var claimBarEchart2 = this.echarts.init(document.getElementById('ClaimBar2'), null, {renderer: 'canvas'}) // 有钻去功能的(第二个)父柱状图
      window.onresize = function () {
        // _this.$refs.ProductPreference.chartsResize()
        // _this.$refs.Survey.chartsResize()
        // _this.isosEchartsObj.isEchart.resize()
        // _this.isosEchartsObj.osEchart.resize()
        accountLieEchart.resize()
        accountPieEchart.resize()
        accountbarEchart.resize()

        machineBarEchart.resize()

        claimPieEchart.resize()
        claimBarEchart.resize()
        claimBarEchart2.resize()
        _this.echarts.init(document.getElementById('ClaimLine'), null, {renderer: 'canvas'}).resize()
        _this.echarts.init(document.getElementById('ClaimBar2'), null, {renderer: 'canvas'}).resize()

        // _this.echarts.init(document.getElementById('barTransaction')).resize()
        //
        // _this.echarts.init(document.getElementById('ClaimPie')).resize()
        // _this.echarts.init(document.getElementById('ClaimBar')).resize()
        // _this.echarts.init(document.getElementById('ClaimLine')).resize()
        // _this.echarts.init(document.getElementById('ClaimBar2')).resize()
      }

      machineBarEchart.on('click', function (params) {
        // console.log('点击了')
        _this.machineProducts = []
        _this.machineBu = []
        // _this.loadMachineChildBar(_this.machineProducts)
        // _this.drillMachineList(_this.machineProducts)
        if (_this.returnIcon === false) {
          _this.machineFlg = 0 // 表格滚动时传bus
          _this.machineBu = [params.name]
          _this.loadMachineChildBar(_this.machineBu)
          _this.loadWarrantyDataBu(_this.machineBu)
          _this.drillMachineListBu(_this.machineBu)
          _this.busValue = _this.machineBu
          _this.productsValue = []
        } else if (_this.returnIcon === true) {
          // console.log('flag为1')
          _this.machineFlg = 1 // 表格滚动时传pro
          _this.machineProducts = [params.name]
          _this.loadWarrantyDataPro(_this.machineProducts)
          _this.drillMachineListPro(_this.machineProducts)
          // _this.busValue = ''
          _this.busValue = []
          _this.productsValue = [params.name]
        }
      })
      claimPieEchart.on('click', function (params) {
        _this.claimAreas = [params.name]
        // 重置flag为空
        _this.claimBpNums = []
        _this.claimBus = []
        _this.claimProducts = []
        // 饼图
        _this.drillCliamPieEcharts(null, null, null, _this.claimAreas, 'cliamPie', params.color.colorStops)
        // 柱状图
        _this.drillCliamBarEcharts(_this.claimAreas)
        // 折线图
        _this.drillCliamLineEcharts(_this.claimAreas)
        // 柱状图2
        _this.drillCliamBar2Echarts(_this.claimAreas)
        // 表格
        _this.drillInItServiceList(_this.claimAreas)
      })
      claimBarEchart.on('click', function (params) {
        // console.log(params.dataIndex)
        // console.log(_this.claimBpIdParams)
        _this.claimBpNums = [_this.claimBpIdParams[params.dataIndex]]
        // 重置flag为空
        _this.claimAreas = []
        _this.claimBus = []
        _this.claimProducts = []
        // console.log(_this.claimBpIdParams[params.dataIndex])
        // 饼图
        _this.drillCliamPieEcharts(_this.claimBpNums)
        // 折线图
        _this.drillCliamLineEcharts(null, _this.claimBpNums)
        // 柱状图2
        _this.drillCliamBar2Echarts(null, _this.claimBpNums)
        // 表格
        _this.drillInItServiceList(null, _this.claimBpNums)
      })
      claimBarEchart2.on('click', function (params) {
        _this.claimAreas = []
        _this.claimBpNums = []
        _this.claimBus = []
        _this.claimProducts = []
        if (_this.claimReturnIcon === false) {
          // 操作的是父图，传bu
          _this.claimBus = [params.name]
          // 钻去子图
          _this.loadCliamChildBar(_this.claimBus)
          // 饼图
          _this.drillCliamPieEcharts(null, _this.claimBus)
          // 柱状图
          _this.drillCliamBarEcharts(null, _this.claimBus)
          // 折线图
          _this.drillCliamLineEcharts(null, null, _this.claimBus)
          // 表格
          _this.drillInItServiceList(null, null, _this.claimBus)
        } else if (_this.claimReturnIcon === true) {
          // 操作的是子图，传products
          _this.claimProducts = [params.name]
          // 饼图
          _this.drillCliamPieEcharts(null, null, _this.claimProducts)
          // 柱状图
          _this.drillCliamBarEcharts(null, null, _this.claimProducts)
          // 折线图
          _this.drillCliamLineEcharts(null, null, null, _this.claimProducts)
          // 表格
          _this.drillInItServiceList(null, null, null, _this.claimProducts)
        }
      })
      // 折线图
      accountLieEchart.on('click', function (params) {
        // console.log('折线图')
        // console.log(params)
        let strStart = '20' + params.seriesName.substr(2, 2)
        let strEnd = +params.name > 9 ? params.name : '0' + params.name
        // this.$set(this.fismonths, 0, [strStart + strEnd])
        _this.fismonths = [strStart + strEnd]
        console.log(_this.fismonths)
      })
    }
  }

  function Thousandth(params) {
    return comdify(params.value.toString())
    // return params.rowIndex
  }

  // function moneyThousandth(params) {
  //   if (params.value.toString() == '0') {
  //     return params.value
  //   } else {
  //     return comdify(params.value.toFixed(2).toString())
  //   }
  //   // return params.rowIndex
  // }
  function moneyThousandth(params) {
    if (params.value == undefined) {
      return
    }
    // console.log(params.value)
    // return comdify(parseFloat(params.value).toFixed(2).toString())
    if (params.value.toString() == '0' || params.value.toString() == '') {
      return params.value.toString()
    } else {
      // return comdify(parseFloat(params.value).toString())
      return comdify(parseFloat(params.value).toFixed(2))
    }
  }

  function comdify(n) {
    var re = /\d{1,3}(?=(\d{3})+$)/g;
    var n1 = n.replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) {
      return s1.replace(re, "$&,") + s2
    })
    return n1
  }

  function index(params) {
    let index = params.rowIndex + 1
    return index.toString()
    // return params.rowIndex
  }

</script>

<style lang="scss" scoped>
  .nodata {
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
    top: 100px;
    z-index: 1;
    color: #666;
    font-size: 13px;
  }

  // 全局搜索element下拉框的样式
  .font12px {
    .el-select-dropdown__item.selected::after {
      right: 5px;
    }
  }

  .total-fr-icon {
    float: right;
    padding-right: 10px;
    /*margin-top: 10px;*/
    font-size: 16px;
  }

  $bg-white: #fff;
  .search-result {
    margin: 0 41px;
    /*border: 1px solid #f00;*/
    .dialog {
      position: fixed;
      left: 0;
      top: 0;
      height: 90vh;
      overflow-y: hidden;
    }
    .dataSource {
      width: 100%;
      // background-color: #FCFCFC;
      // margin-bottom: 20px;
      // padding: 10px 15px;
      // border-radius: 5px;
      // box-shadow: 1px 2px 5px #cccccc;
      .questes {
        font-family: "MicrosoftYaHei[Regular]";
        color: #333333;
        font-size: 18px;
        padding-top: 15px;
        margin-bottom: 5px;
        margin: 0px;
        color: #53ADEB;
        img {
          vertical-align: bottom;
          margin-right: 5px;

        }
      }
      .flex-wrapper {
        display: flex;
        margin-top: 5px;
        font-family: "MicrosoftYaHei[Regular]";
        /* color: #959595;*/
        color: #666;
        font-size: 15px;
        div:nth-of-type(1) {
          margin-right: 10px;
          margin-top: 5px;
        }
        div:nth-of-type(2) {
          line-height: 25px;
        }
      }
    }
    .reset {
      width: 40px;
      height: 40px;
      position: fixed;
      top: 55px;
      right: 5px;
      z-index: 10;
      /*background: linear-gradient(to bottom right, #8928f5, #2853f1);*/
      background: #0090e0;
      cursor: pointer;
      text-align: center;
      border-radius: 24px;
      /*border-radius: 5px;*/
      box-shadow: 0 3px 12px #e0e2e9;
      i {
        line-height: 40px;
        font-size: 20px;
        color: #fff;
      }
    }
    .header-profile {
      // background-color: $bg-white;
      .cbi-logon {
        /*background-color: #f00;*/
        img {
          width: 80px;
        }
      }
      .company-information {
        /*background-color: #00f;*/
        .company-title {
          /*background-color: #ff0;*/
          /*margin-top: 60px;*/
          /*margin-bottom: 20px;*/
          margin-bottom: 10px;
          color: #333;
          font-size: 20px;
          font-weight: bold;
          .link {
            font-size: 26px;
            color: #3dc1df;
          }
          .link:hover {
            color: #f99;
          }
          .return {
            display: inline-block;
            font-size: 16px;
            float: right;
            padding: 5px 10px;
            cursor: pointer;
            color: #1e90ff;
            .icon-houtui {
              font-size: 20px;
            }

          }
        }
        .company-tag {
          /*margin-top: 10px;*/
          padding-bottom: 5px;
          font: 14px Helvetica Regular;
          color: #fff;
          .span-fathre {
            display: inline-block;
            height: 26px;
            line-height: 26px;
            padding: 0px 15px;
            border-radius: 15px;
            margin-right: 15px;
            background-color: #7f21e0;
            font-weight: bold;
          }
          .span-fathre:nth-child(1) {
            background-color: #42da92;
            /*background-color: #00ce05;*/
            /*background-color: #a2fd3e;*/
          }
          .span-fathre:nth-child(2) {
            background-color: #62affd;
            /*background-color: #1e90ff;*/
            /*background-color: #8bd9ff;*/
          }
          .span-fathre:nth-child(3) {
            background-color: #ff957f;
            /*background-color: #f17c68;*/
            /*background-color: #ffc4bd;*/
          }
          .span-fathre:nth-child(4) {
            background-color: #ff94d8;
            /*background-color: #ffbf00;*/
            /*background-color: #ffee8b;*/
          }
          .span-fathre:nth-child(5) {
            background-color: #c77ef4;
            /*background-color: #fd60af;*/
            /*background-color: #ff99cc;*/
          }
          .span-fathre:nth-child(6) {
            background-color: #f7c572;
          }
          .span-fathre:nth-child(7) {
            background-color: #f772a1;
          }
          .span-fathre:nth-child(8) {
            background-color: #728bf7;
          }
          .span-fathre:nth-child(9) {
            background-color: #72f7d6;
          }
          .span-fathre:nth-child(10) {
            background-color: #9172f7;
          }
        }
        .company-info {
          margin-top: -5px;
          .p-font {
            color: #959eaf;
            font-size: 15px;
            font-family: 方正兰亭黑;
            p {
              margin: 22px 0;
            }
            span {
              color: #14142d;
            }
          }
          .p-font-little {
            margin-top: 20px;
            color: #959eaf;
            font: 15px Helvetica, Regular;
          }
        }
      }
    }
    .select-dimension {
      position: relative;
      height: 90px;
      .btn-clear {
        position: absolute;
        z-index: 100;
        right: 0;
        height: 36px;
        top: -40px;
        font: 15px Helvetica, Regular;
        padding: 5px 16px;
        border-radius: 7px;
      }
      .select-item {
        /*border: 1px solid #090;*/
        height: 62px;
        /*margin: 0 0 0 30px;*/
        margin: 0 0 0 15px;
        padding-top: 15px;
        /*padding: 10px 10px;*/
        /*border-bottom: 1px solid #ccc;*/
        .clearSelect {
          position: relative;
          top: 10px;
          cursor: pointer;
          &:hover {
            font-weight: bold;
            color: #f33;
          }
        }
        .title-tag {
          color: #000;
          /*font: 18px ArialMT;*/
          font-size: 14px;
        }
      }
    }
    .search-tab {
      margin-top: 20px;
      // 过保
      .warranty-card {
        margin: 20px 0 30px 0;
        /*margin:0 10px 10px 10px;*/
        /*border: 1px solid rgba(0, 0, 0, 0.1);*/
        /*border-radius: 10px;*/
        .warranty-content {
          /*margin: 24px 36px 41px 36px*/
          /*margin: 22px 34px 39px 34px*/
        }
        .h3-title {
          margin: 0 0 18px 10px;
          padding: 0;
          font: bold 24px Arial-BoldMT;
          color: #000;
        }
        .flex-father {
          width: 100%;
          padding-bottom: 20px;
          text-align: center;
          display: flex;
          justify-content: space-around;
          .flex-line {
            width: 3px;
            height: 180px;
            background-color: rgba(0, 0, 0, 0.1);
          }
          .flex-son {
            cursor: pointer;
            text-align: left;
            /*flex: 1;*/
            width: 185px;
            .round-icon {
              width: 10px;
              height: 10px;
              /*border: 1px solid #ccc;*/
              border-radius: 50px;
              display: inline-block;
            }
            .title {
              /*font: 14px Helvetica;*/
              // 会把文字挤下去，统一把设计给的字体调小2px
              font: 14px ArialMT;
              color: #333;
            }
            .title-bold {
              /*font: bold 16px Helvetica;*/
              font: bold 14px Helvetica;
              color: #333;
            }
            .top-color {
              width: 100%;
              height: 8px;
            }
            .expired_30 {
              background: #fab478;
            }
            .expired_60 {
              background: #f8c36f;
            }
            .expired_90 {
              background: #f79169;
            }
            .expire_in_30 {
              background: #1bd85c;
            }
            .expire_in_60 {
              background: #41cc3e;
            }
            .expire_in_90 {
              background: #03af3f;
            }
            .colorRed {
              background: #b70303;
            }
            .colorOrange {
              background: #ee8050;
            }
            .colorBlue {
              background: #0090e9;
            }
            .colorGreen {
              background: #00a61f;
            }
            /*.expired-color {*/
            /*background: -webkit-linear-gradient(left, #913af6, #3d62f2); !* Safari 5.1 - 6.0 *!*/
            /*background: -o-linear-gradient(right, #913af6, #3d62f2); !* Opera 11.1 - 12.0 *!*/
            /*background: -moz-linear-gradient(right, #913af6, #3d62f2); !* Firefox 3.6 - 15 *!*/
            /*background: linear-gradient(to right, #913af6, #3d62f2); !* 标准的语法 *!*/
            /*}*/
            /*.expire-color {*/
            /*background: -webkit-linear-gradient(left, #c24039, #f08351); !* Safari 5.1 - 6.0 *!*/
            /*background: -o-linear-gradient(right, #c24039, #f08351); !* Opera 11.1 - 12.0 *!*/
            /*background: -moz-linear-gradient(right, #c24039, #f08351); !* Firefox 3.6 - 15 *!*/
            /*background: linear-gradient(to right, #c24039, #f08351); !* 标准的语法 *!*/
            /*}*/
            /*.color1 {*/
            /*background: -webkit-linear-gradient(left, #8e33eb , #17a6e4); !* Safari 5.1 - 6.0 *!*/
            /*background: -o-linear-gradient(right, #8e33eb, #17a6e4); !* Opera 11.1 - 12.0 *!*/
            /*background: -moz-linear-gradient(right, #8e33eb, #17a6e4); !* Firefox 3.6 - 15 *!*/
            /*background: linear-gradient(to right, #8e33eb , #17a6e4); !* 标准的语法 *!*/
            /*}*/
            /*.color2 {*/
            /*background: -webkit-linear-gradient(left, #a862f0, #59c2ef); !* Safari 5.1 - 6.0 *!*/
            /*background: -o-linear-gradient(right, #a862f0, #59c2ef); !* Opera 11.1 - 12.0 *!*/
            /*background: -moz-linear-gradient(right, #a862f0, #59c2ef); !* Firefox 3.6 - 15 *!*/
            /*background: linear-gradient(to right, #a862f0 , #59c2ef); !* 标准的语法 *!*/
            /*}*/
            /*.color3 {*/
            /*background: -webkit-linear-gradient(left, #c791ff , #77d6ff); !* Safari 5.1 - 6.0 *!*/
            /*background: -o-linear-gradient(right, #c791ff, #77d6ff); !* Opera 11.1 - 12.0 *!*/
            /*background: -moz-linear-gradient(right, #c791ff, #77d6ff); !* Firefox 3.6 - 15 *!*/
            /*background: linear-gradient(to right, #c791ff , #77d6ff); !* 标准的语法 *!*/
            /*}*/
            /*.color4 {*/
            /*background: -webkit-linear-gradient(left, #ff599e , #ffab68); !* Safari 5.1 - 6.0 *!*/
            /*background: -o-linear-gradient(right, #ff599e, #ffab68); !* Opera 11.1 - 12.0 *!*/
            /*background: -moz-linear-gradient(right, #ff599e, #ffab68); !* Firefox 3.6 - 15 *!*/
            /*background: linear-gradient(to right, #ff599e , #ffab68); !* 标准的语法 *!*/
            /*}*/
            /*.color5 {*/
            /*background: -webkit-linear-gradient(left, #ff6ca9 , #fdb47a); !* Safari 5.1 - 6.0 *!*/
            /*background: -o-linear-gradient(right, #ff6ca9, #fdb47a); !* Opera 11.1 - 12.0 *!*/
            /*background: -moz-linear-gradient(right, #ff6ca9, #fdb47a); !* Firefox 3.6 - 15 *!*/
            /*background: linear-gradient(to right, #ff6ca9 , #fdb47a); !* 标准的语法 *!*/
            /*}*/
            /*.color6 {*/
            /*background: -webkit-linear-gradient(left, #ff92bf , #ffca9f); !* Safari 5.1 - 6.0 *!*/
            /*background: -o-linear-gradient(right, #ff92bf, #ffca9f); !* Opera 11.1 - 12.0 *!*/
            /*background: -moz-linear-gradient(right, #ff92bf, #ffca9f); !* Firefox 3.6 - 15 *!*/
            /*background: linear-gradient(to right, #ff92bf , #ffca9f); !* 标准的语法 *!*/
            /*}*/
            .flex-son-div {
              text-align: center;
              flex: 1;
              /*height: 130px;*/
              border: 1px solid rgba(0, 0, 0, 0.1);
              border-radius: 3px;
              margin-top: 12px;
              .son-h3 {
                margin: 33px 0 12px 0;
                /*font: bold 42px Helvetica;*/
                font: 38px ArialMT;
                color: #515865;
              }
              span {
                /*font: 17px Helvetica;*/
                font: 16px ArialMT;
                color: #939cad;
                display: inline-block;
                margin-bottom: 34px;
              }
            }
          }
        }
      }
      .transaction {
        margin-bottom: 10px;
      }
      .h3-pama0 {
        margin: 0 0 20px 10px;
        padding: 0;
        /*font-size: 18px;*/
        font: bold 16px;
        color: #666;
      }
      .icon-fanhui {
        position: relative;
        z-index: 2;
        font-size: 20px;
        color: #1E90FF;
        margin-right: 5px;
      }
      /*background-color: #f5f5f5;*/
      /*.select-item {*/
      /*!*border: 1px solid #090;*!*/
      /*padding: 10px 2vw;*/
      /*border-bottom: 1px solid #ccc;*/
      /*.btn-clear {*/
      /*position: relative;*/
      /*top: 3px;*/
      /*}*/
      /*.clearSelect {*/
      /*position: relative;*/
      /*top: 10px;*/
      /*cursor: pointer;*/
      /*&:hover {*/
      /*font-weight: bold;*/
      /*color: #f33;*/
      /*}*/
      /*}*/
      /*}*/
      .service {
        margin: 20px 0 10px 0;
      }
      .select-item2 {
        /*border: 1px solid #090;*/
        padding: 5px 2vw 20px 2vw;
        .clearSelect {
          position: relative;
          top: 10px;
          cursor: pointer;
          &:hover {
            font-weight: bold;
            color: #f33;
          }
        }
      }
      .select-echarts {
        /*border: 1px solid #090;*/
        padding-bottom: 10px;
        .tips {
          width: 100%;
          text-align: center;
          padding-top: 10vh;
          font-size: 20px;
          font-weight: bold;
          color: #99a9bf;
        }
      }
      .f-r {
        float: right;
        /*margin-top: 3vh;*/
        margin-top: 1vh;
        padding-bottom: 1vh;
      }
      .profile {
        padding-top: 20px;
        /*text-align: center;*/
        /*background-color: #fff;*/
        .stock {
          margin: 0 2vw;
          padding-bottom: 1vh;
          /*background: #f00;*/
          ul, li, h3, p {
            margin: 0;
            padding: 0;
          }
          h3 {
            margin: 0 0 15px 0;
          }
          li {
            &:first-child {
              margin-top: 40px;
            }
            margin: 0 0 30px 0;
            list-style: none;
          }
          .left {
            text-align: left;
            /*background-color: #090;*/
            .arrow {
              font-weight: bold;
              font-size: 30px;
            }
            .col-red {
              color: #c10d01;
            }
            .col-green {
              color: #018101;
            }
          }
          .right {
            text-align: center;
            /*background-color: #00f;*/
            /*padding: 0 1vw;*/
            &:after {
              content: '';
              clear: both;
              display: block;
            }
            .top {
              float: right;
            }
            .middle {
              margin-bottom: 60px;
            }
          }
          .center {
            /*background-color: #ff0;*/
            p {
              margin-top: 15px;
            }
          }
        }
        .but-tab {
          text-align: center;
          .el-button {
            border-radius: 100px;
            margin-right: 10px;
          }
        }
        .echart {
          /*text-align: center;*/
          /*margin-left: 80px;*/
        }
        .echart-content, .person-list {
          margin: 0 2vw;
          h2 {
            float: left;
            color: #55adec;
          }
        }
      }
      .person-list {
        margin: 30px 0 10px 0px;
      }
      .account {
        margin: 30px 0 10px 0;
        .person-icon {
          color: #409eff;
          &:hover {
            color: #f33;
          }
        }
        .tag {
          padding: 10px;
        }
      }
      .elHeight {
        height: 10px;
      }
      .total-fr {
        float: right;
        padding-right: 10px;
        margin-top: 10px;
        font-size: 16px;
      }
      /*}*/
    }
  }

  .icon {
    cursor: pointer;
  }

  .warrantyEcharts {
    overflow: auto;
    height: 70vh;
    /*max-width: 40vw;*/
    margin: 0 auto;
    #warrantyBar {
      width: 100%;
    }
  }

</style>
